首页 > 代码库 > canvas矩形的清除，描边与填充
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 Supported20 </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矩形的清除，描边与填充
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。