I wanted to cut out an area in a fillRect for my use. This was used when I was learning the clip method.
But I can’t get the buckle area, the code is as follows
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title></title> </head> <body> <canvas id=canvas width=800 height=600></canvas> < /body> <script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.fillStyle = lightgreen; context.fillRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.fillRect(100, 100, 200, 100); context.clip(); context.closePath(); context. fillStyle = lightblue; context.fillRect(0, 0, canvas.width, canvas.height); </script> </html>
I found that if you want to cut out a new path, you should use methods such as rect and arc.
All should be changed to
context.beginPath(); context.rect(100, 100, 200, 100); context.clip();
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.