标签：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Learning the basics of canvas</title> <style type="text/css"> *{ margin: 0; padding: 0; } /*canvas默认大小300*150个屏幕像素，用css设置canvas的width和height，可能会导致浏览器缩放canvas * canvas的颜色默认和父集背景颜色一样,所以应该设置颜色,避免写明JS调用无法看到canvas的情况*/ #canvas{ background-color: #00FFFF; margin:10px; padding: 10px; border: 10px #FFE4C4 solid; } </style> </head> <body> <!--canvas中间的内容不会输出，只有浏览器不支持的时候，会输出里面的文字--> <canvas id="canvas" width="400" height="300">Canvas not supported</canvas> <script type="text/javascript"> //定义canvas这个变量，并且设置2d环境 var canvas = document.getElementById(‘canvas‘); context = canvas.getContext(‘2d‘); //canvas 默认颜色是黑色，所以会有一个黑色矩形 //格式为context.fillRect(x,y,width,height) context.fillRect(40,40,100,100); //注意有一个问题，你绘制的图形原点在canvas之外，可能无法正常显示 //strokeRect给矩形描边 context.strokeRect(200,200,100,100); </script> </body> </html>
示意图
标签：
原文地址：http://www.cnblogs.com/studyhtml5/p/5902928.html
