canvas矩形的清除，描边与填充
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas矩形的清除，描边与填充相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>huatu</title> 6 <style> 7 body{ 8 background: #dddddd; 9 } 10 #canvas{ 11 margin: 10px; 12 background: #ffffff; 13 border: thin inset #aaaaaa; 14 } 15 </style> 16 </head> 17 <body> 18 <canvas id="canvas" width="600" height="400"> 19 Canvas not Supported 20 </canvas> 21 <script> 22 var canvas=document.getElementById(‘canvas‘), 23 context=canvas.getContext(‘2d‘); 24 context.lineJoin=‘round‘; 25 context.lineWidth=30; 26 27 context.font=‘24px Helvetica‘; 28 context.fillText(‘Click anywhere to erase‘,175,40); 29 30 context.strokeRect(75,100,200,200); 31 context.fillRect(325,100,200,200); 32 33 context.canvas.onmousedown = function(e) { 34 context.clearRect(0,0,600,400); 35 } 36 </script> 37 </body> 38 </html>
以上是关于canvas矩形的清除，描边与填充的主要内容，如果未能解决你的问题，请参考以下文章