码迷,mamicode.com
首页 > 其他好文 > 详细

学习Canvas绘图与动画基础 为多边形着色(三)

时间:2015-12-17 19:15:31      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

 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.fillStyle="rgb(2,100,30)";
23       context.fill();
24       
25       context.lineWidth=5;
26       context.strokeStyle="red";
27       context.stroke();
28    </script>
29    <!--
30       1.context.fillStyle="rgb(2,100,30)";和context.fill();//给多边形填充颜色
31       2.context.lineWidth=5;
32         context.strokeStyle="red";
33         context.stroke();
34         //为外边框着色
35     -->
36 </body>
37 </html>

 

学习Canvas绘图与动画基础 为多边形着色(三)

标签:

原文地址:http://www.cnblogs.com/dreamflower/p/5054978.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!