标签：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Learning the basics of canvas</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 /*canvas的颜色默认和父集背景颜色一样,所以应该设置颜色,避免写明JS调用无法看到canvas的情况*/ 12 #canvas{ 13 background-color: #00FFFF; 14 margin:10px; 15 padding: 10px; 16 border: 10px #FFE4C4 solid; 17 } 18 </style> 19 20 </head> 21 <body> 22 <!--canvas中间的内容不会输出，只有浏览器不支持的时候，会输出里面的文字--> 23 <canvas id="canvas" width="400" height="300">Canvas not supported</canvas> 24 <script type="text/javascript"> 25 //定义canvas这个变量，并且设置2d环境 26 var canvas = document.getElementById(‘canvas‘); 27 context = canvas.getContext(‘2d‘); 28 //canvas 默认颜色是黑色，所以会有一个黑色矩形 29 //格式为context.fillRect(x,y,width,height) 30 context.fillRect(40,40,100,100); 31 //注意有一个问题，你绘制的图形原点在canvas之外，可能无法正常显示 32 </script> 33 </body> 34 </html>
看到的效果
标签：
原文地址：http://www.cnblogs.com/studyhtml5/p/5902886.html
