共计 973 个字符，预计需要花费 3 分钟才能阅读完成。
一、效果图
二、上代码
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <style> | |
| #canvas{background: url(https://image-static.segmentfault.com/464/827/464827894-6363d955ba2a5_fix732); | |
| background-size: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="canvas" width="480" height="720"> | |
| 你的浏览器不反对 canvas，请降级你的浏览器。</canvas> | |
| <script> | |
| const canvas = document.getElementById('canvas') | |
| let ctx = canvas.getContext("2d") | |
| ctx.beginPath(); | |
| ctx.fillStyle = '#9c9fb3'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| ctx.globalCompositeOperation = 'destination-out'; | |
| ctx.lineWidth = 60; | |
| ctx.lineCap = 'round'; | |
| canvas.onmousedown = function(e) { | |
| var event = e || window.event; | |
| var x = event.clientX; | |
| var y = event.clientY; | |
| ctx.moveTo(x, y); | |
| } | |
| canvas.onmousemove = function(e) { | |
| var event = e || window.event; | |
| var x = event.clientX; | |
| var y = event.clientY; | |
| ctx.lineTo(x, y); | |
| ctx.stroke();} | |
| </script> | |
| </body> | |
| </html> |
三、重点 globalCompositeOperation 用法
正文完
