用HTML5 CANVAS做自定义路径的动态效果图片!

时间:2022-05-16 12:09:04

最近对HTML5开始感兴趣了,实现的效果如下图,大家可以从代码里换掉图片

用HTML5 CANVAS做自定义路径的动态效果图片!

我用的是canvas里面的2d绘图,其中上图的路径是网上在线绘制的,我太懒了,哈哈

下面是网址:

http://www.victoriakirst.com/beziertool/

专门绘制贝尔塞曲线的哦。这个工具很强大,细心的还会发现:在下面可以载入背景图,那么你就可以更加方便的绘制曲线了

大大增加了成功率哦。

下面贴代码,其实我有些地方也不太懂,关于颜色方面的什么的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#canvasPic
{
overflow
:hidden;

}

</style>
</head>

<body>

<canvas id="canvasPic" style="border:2px solid red;" width="700" height="500">


</canvas>



<script type="text/javascript">
var canvas=document.getElementById("canvasPic");
var ctx=canvas.getContext("2d");
drawShape(ctx,
0,0);

//绘制形状
function drawShape(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();
}

//载入图片
var img=new Image();
img.src
="v.png";


img.onload
=function()
{

var pattern=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();

}


</script>

</body>
</html>