Canvas讲解

1.Canvas是什么？

简单地说canvas是画布，可以进行画任何的线、图形、填充等一系列的操作，而且操作的画图就是js，

提供简单的二维矢量绘图.

2.步骤：

<canvas id="aa">12</canvas> //创建HTML页面，设置画布标签
var canvas=document.getElementById("aa");//编写js，获取画布dom对象
var ctx=canvas.getContext("2d"); //通过Canvas标签的Dom对象获取上下文
ctx.fillStyle="green"; //设置绘制线样式、颜色
ctx.fillRect(10,10,100,100); //绘制矩形，或者填充矩形

3.代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>我的网页</title>
 6 </head>
 7 <body>
 8     <h1>我的网页</h1>
 9     <hr>
10     <canvas id="aa">12</canvas>
11     <script>
12         var canvas=document.getElementById("aa");
13         var ctx=canvas.getContext("2d");
14         ctx.fillStyle="green";
15         ctx.fillRect(0,0,100,100);
16         ctx.strokeRect(120, 0, 100, 100);
17         // 设置带透明度的样式
18         ctx.fillStyle = "rgba(0,255,0,0.5)";
19         ctx.strokeStyle = "rgba(255,0,255,0.5)";
20         ctx.fillRect(240,0 , 100, 100);
21         ctx.strokeRect(240, 120, 100, 100);
22     </script>
23 </body>
24 </html>

4.效果

5.其他　　

圆弧ctx.arc(x, y, radius, starAngle,endAngle, anticlockwise)

画线ctx.lineTo(100, 100);

线性渐变 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)

线性渐变颜色lg.addColorStop(offset,color)

径向渐变（发散）var rg=ctx.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

径向渐变（发散）颜色rg.addColorStop(offset,color)

posted @ 2017-01-06 21:58 江山代有才人出阅读(250) 评论(0) 编辑收藏举报

刷新页面返回顶部

江山如画

版权声明：本博客所载文章，原创文章的版权归本人所有，未经许可，不得转载。转载文章的版权归原作者所有，如果侵犯了您的版权，请通知本人，本人将会删除相应文章。

Canvas讲解

公告