clip-multiple-move-1.html (463B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <canvas id="canvas" width="100" height="100"></canvas> 5 6 <script> 7 8 var canvas = document.getElementById('canvas'); 9 var ctx = canvas.getContext('2d'); 10 11 ctx.fillStyle = '#0f0'; 12 ctx.fillRect(0, 0, 100, 100); 13 14 ctx.beginPath(); 15 ctx.moveTo(100, 30); 16 ctx.moveTo(30, 30); 17 ctx.lineTo(30, 70); 18 ctx.lineTo(70, 70); 19 ctx.lineTo(70, 30); 20 ctx.closePath(); 21 ctx.clip(); 22 23 ctx.fillStyle = '#f00'; 24 ctx.fillRect(0, 0, 100, 100); 25 26 </script> 27 </body></html>