canvas绘制矩形

canvas绘制矩形的思路:


1.先取得canvas元素,用document.getElementById等方法取得canvas对象。

2.取得上下文context,用getcontext取得图形上下文,参数设置为2D。

3.设定绘图样式,fillstyle:填充的样式,填入颜色值。如:xxx.fillStyle="#F00";  strokeStyle:图形边框样式,填入颜色值。如:xxx.strokeStyle="#000";

4.设置线宽,用linewidth。如:xxx..linewidth=1;

5.绘制矩形,分别用fillRect strokeRect方法来填充矩形和边框。方法定义如:context.fillRect(x,y,width,height) context.strokeRect(x,y,width,height) x是指起点的横坐标,y是指起点的纵坐标,坐标原点是canvas的左上角。

 

 1 <!DOCTYPE html>
 2 <meta charset="utf-8">
 3 <head>
 4 </head>
 5 
 6 <body>
 7 <canvas id="juxing" width="400" height="400"></canvas>
 8 <script type=text/javascript>
 9 var canvas=document.getElementById("juxing");  //读取canvas元素的id
10 var context=canvas.getContext("2d");
11 context.fillStyle="#FF0000";  //填充的颜色
12 context.strokeStyle="000";  //边框颜色
13 context.linewidth=10;  //边框宽
14 context.fillRect(0,0,400,400);  //填充颜色 x y坐标 宽 高
15 context.strokeRect(0,0,400,400);  //填充边框 x y坐标 宽 高
16 </script>
17 </body>
18 </html>
posted @ 2012-08-17 11:13  yexingwen  阅读(9411)  评论(0编辑  收藏  举报