最近對HTML5開始感興趣了，實現的效果如下圖，大家可以從代碼里換掉圖片
我用的是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>