学习Canvas绘图与动画基础 绘制直线（二） 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4    <meta charset="UTF-8">
 5    <title>绘制直线</title>
 6 </head>
 7 <body>
 8    <canvas id="canvas" style="border:1px solid #aaa; display:block;margin:30px auto;">
 9      当前浏览器不支持Canvas,请更换浏览器
10    </canvas>
11    <script>
12       var canvas=document.getElementById('canvas');  
13       canvas.width=1024;
14       canvas.height=768;//也可以在这里设置width和height
15       var context=canvas.getContext('2d');
16       //使用context进行绘制
17       
18       context.moveTo(100,100);
19       context.lineTo(700,700);
20       context.lineTo(100,700);
21       context.lineTo(100,100);
22       context.lineWidth=5;
23       context.strokeStyle="#005588";
24       context.stroke();
25    </script>
26    <!--
27       1.context.moveTo(100,100);和context.lineTo(700,700);//状态设置
28       2.context.stroke();//绘制
29       3.context.lineWidth=5;//设置线条的宽度
30       4.context.strokeStyle="#005588";//线条样式，主要指颜色
31     -->
32 </body>
33 </html>

 

posted @ 2015-12-17 18:25  dreamflower  阅读(396)  评论(0)    收藏  举报