标签：
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>
标签：
原文地址：http://www.cnblogs.com/studyhtml5/p/5890766.html
