html5自定义图片位置,用HTML5 CANVAS做自定义路径的动态效果图片！

无标题文档

}

varcanvas=document.getElementById("canvasPic");varctx=canvas.getContext("2d");

drawShape(ctx,0,0);//绘制形状

functiondrawShape(ctx, xoff, yoff) {

ctx.beginPath();

ctx.moveTo(291 +xoff,74 +yoff);

ctx.bezierCurveTo(281 +xoff,62 +yoff,122 +xoff,138 +yoff,132 +xoff,256 +yoff);

ctx.bezierCurveTo(133 +xoff,271 +yoff,46 +xoff,233 +yoff,28 +xoff,258 +yoff);

ctx.bezierCurveTo(9 +xoff,284 +yoff,19 +xoff,353 +yoff,31 +xoff,362 +yoff);

ctx.bezierCurveTo(123 +xoff,431 +yoff,130 +xoff,332 +yoff,159 +xoff,377 +yoff);

ctx.bezierCurveTo(167 +xoff,390 +yoff,120 +xoff,470 +yoff,194 +xoff,480 +yoff);

ctx.bezierCurveTo(209 +xoff,482 +yoff,378 +xoff,486 +yoff,368 +xoff,461 +yoff);

ctx.bezierCurveTo(362 +xoff,447 +yoff,427 +xoff,462 +yoff,440 +xoff,426 +yoff);

ctx.bezierCurveTo(445 +xoff,412 +yoff,511 +xoff,416 +yoff,529 +xoff,350 +yoff);

ctx.bezierCurveTo(550 +xoff,273 +yoff,543 +xoff,157 +yoff,537 +xoff,121 +yoff);

ctx.bezierCurveTo(535 +xoff,106 +yoff,498 +xoff,89 +yoff,469 +xoff,69 +yoff);

ctx.bezierCurveTo(457 +xoff,60 +yoff,307 +xoff,71 +yoff,292 +xoff,71 +yoff);

ctx.stroke();

}//载入图片

varimg=newImage();

img.src="v.png";

img.onload=function()

{varpattern=ctx.createPattern(img,"repeat");//img.width='100px';

ctx.fillStyle=pattern;

ctx.fill();

ctx.globalCompositeOperation="copy";

}//图片鼠标效果

canvas.onmouseover=function()

{//alert('1');

ctx.shadowColor="black";

ctx.shadowBlur=20;

ctx.shadowOffsetX=6;

ctx.shadowOffsetY=6;

ctx.fill();

ctx.globalCompositeOperation="xor";

ctx.shadowColor="white";

ctx.shadowBlur=20;

ctx.shadowOffsetX=6;

ctx.shadowOffsetY=6;

ctx.fill();

}

canvas.onmouseout=function()

{

ctx.shadowColor="white";

ctx.fill();

ctx.globalCompositeOperation="lighter";

ctx.shadowColor="black";

ctx.fill();

}