使用HTML5画布绘制正方形

1. 打开记事本写下以下代码：

   <!DOCTYPE html><html><body><canvas id="myCanvas" width="300" height="150" ;></canvas>

   <script>var a=document.getElementById("myCanvas"); // 使用 getElementById 将其链接到“myCanvas”

   var square=a.getContext("2d");//这里通过square获取处理API的上下文contextsquare.beginPath();//开始准备绘制新的图形

   square.moveTo(0,0);//开始设置起始绘制坐标位置

   square.lineTo(100,0);//开始设置直线绘制横向结束的坐标位置 

   square.lineTo(100,100);//开始设置直线绘制纵向结束的坐标位置 square.lineTo(0,100);square.lineTo(0,0);square.strokeStyle="red";//设置直线颜色

   square.stroke(); //开始正式绘制一条直线</script> </body></html>

   
2. 2

   另存为“htm”

   
3. 3

   用IE或其他浏览器打开

   
   END

注意事项

• beginPath() - 开始准备绘制
• moveTo() - 绘制的其实坐标（x, y）
• lineTo() - 绘制结束的坐标（x, y
• square.strokeStyle 设置直线颜色
• stroke() - 立刻开始绘制直线
• canvas 元素使用 JavaScript 在网页上绘制图像