Canvas讲解

时间 2019-11-12

标签 canvas 讲解繁體版

原文原文链接

1.Canvas是什么？ html

简单地说canvas是画布，能够进行画任何的线、图形、填充等一系列的操做，并且操做的画图就是js，canvas

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

2.步骤：spa

<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.代码：code

 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.效果htm

5.其余　　对象

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

画线ctx.lineTo(100, 100);ip

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

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

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

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