jquery - Apply Pattern to a 3d image using javascript -
i want apply pattern 3d image using javascript.i have sample image
and pattern
i want apply pattern shirt utilize canvas set first image background image of canvas , apply pattern using code of javascript
<!doctype html> <html> <head> <titlelab></title> <style> #mycanvas{ border:1px solid #000000; background-image:url('image/shirt.jpeg'); background-size:cover } </style> <script> function drawshape(){ // canvas element using dom var canvas = document.getelementbyid('mycanvas'); // create sure don't execute when canvas isn't supported if (canvas.getcontext){ // utilize getcontext utilize canvas drawing var ctx = canvas.getcontext('2d'); // create new image object utilize pattern var img = new image(); img.src = 'pattern.jpg'; img.onload = function(){ // create pattern var ptrn = ctx.createpattern(img,'repeat'); ctx.fillstyle = ptrn;1 ctx.fillrect(10,100,100,100); } } else { alert('you need safari or firefox 1.5+ see demo.'); } } </script> </head> <body onload="drawshape();"> <canvas id="mycanvas" width="249" height="428"> </canvas> </body> </html> how identify paths fill shirt . when fills looks sticker set on , how create realistic.is there library available larn there.need help. thanks.
have loog on link below
http://jsfiddle.net/m1erickson/kzfkd/
var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var img1 = new image(); var img = new image(); img.onload = function () { img1.onload = function () { start(); } img1.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/4jisz1.png"; } img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/boomu1.png"; function start() { ctx.drawimage(img1, 0, 0); ctx.globalcompositeoperation = "source-atop"; var pattern = ctx.createpattern(img, 'repeat'); ctx.rect(0, 0, canvas.width, canvas.height); ctx.fillstyle = pattern; ctx.fill(); ctx.globalalpha = .10; ctx.drawimage(img1, 0, 0); ctx.drawimage(img1, 0, 0); ctx.drawimage(img1, 0, 0); } <canvas id="canvas" width=436 height=567></canvas> javascript jquery html5 canvas
No comments:
Post a Comment