好久没玩canvas了，随便写点效果玩玩。要开始重新拾起这门牛x的技术了，工作中不一定能用得上，以后说不定就能发挥用处了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> canvas{border: 1px solid #ccc;background: url(http://p0.so.qhmsg.com/t01bf9deea2f89683d5.jpg) center/cover no-repeat} </style> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); canvas.width = 500; canvas.height = 500; ctx.fillStyle = '#ccc'; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = 'destination-out'; ctx.lineWidth = 50; canvas.onmousedown = function(e){ ctx.beginPath(); ctx.lineTo(e.pageX,e.pageY); canvas.onmousemove = function(e){ ctx.lineTo(e.pageX,e.pageY); ctx.stroke(); }; canvas.onmouseup = function(){ canvas.onmousemove = null; } }; </script> </body> </html>