canvas基础——绘制简单的图形

时间：2014-11-26 01:15:56 收藏：0 阅读：218

绘制直线：

HTML部分：

1 <canvas id="myCanvas" style="border:1px solid #000;" width="200px" height="100px"></canvas>

JS部分：

1 window.onload = function(){
2     var c = document.getElementById(‘myCanvas‘);
3     var context = c.getContext(‘2d‘);
4     context.moveTo(0,0);　　　　//起点坐标
5     context.lineTo(200,100);　　//终点坐标
6     context.stroke();    　　　　//绘制直线
7 };

绘制直线中使用了3个方法：moveTo，lineTo和stroke.

其中moveTo方法用于创建新的子路径，并规定起始坐标点为（x,y），即moveTo(x,y);

linTo方法用于从moveTo方法规定的起始坐标点开始绘制一条到规定坐标的直线，即lineTo(x,y);

上面两个方法规定了直线路径的起点和终点，而stroke方法用于沿着该路径绘制一条直线。

绘制矩形：

JS代码：

1 var c = document.getElementById(‘myCanvas‘);
2     var context = c.getContext(‘2d‘);
3     context.fillStyle = ‘red‘;
4     context.fillRect(0,0,100,50);
5     context.strokeStyle = ‘white‘;
6     context.strokeRect(0,0,50,25);

在上面的代码中，fillStyle属性用于指定要绘制的图形的填充颜色，而fillRect方法用于以指定的颜色填充一个矩形，括号中的参数用于指定矩形的坐标位置和大小。

fill是填充，stroke是轮廓，所以用strokeStyle和strokeRect方法绘制矩形轮廓。

绘制圆形：

1 var c = document.getElementById(‘myCanvas‘);
2     var context = c.getContext(‘2d‘);
3     context.fillStyle = ‘red‘;
4     context.beginPath();
5     context.arc(100,75,50,0,Math.PI*2,true);
6     context.closePath();
7     context.fill();

圆形的绘制仍然是采用路径并填充颜色的方法。

beginPath()：开始绘制路径

closePath()：用于结束绘制路径

arc()：用于绘制圆形

用法：context.ar(x,y,radius,startAngle,endAngle,anticlockwise)

arc方法本意是绘制弧线，当采用适当的参数后即可绘制圆形，参数中的x,y为起点坐标，radius为圆形的半径，startAngle为开始的角度，

endAngle为结束的角度，anticlockwise为是否逆时针（true）为逆时针，(false)为顺时针方向进行绘制。

bubuko.com,布布扣

绘制圆弧实例

1 var c = document.getElementById(‘myCanvas‘);
2     var context = c.getContext(‘2d‘);
3     for(var i = 0; i<10; i++){
4         context.strokeStyle = ‘red‘;
5         context.beginPath();
6         context.arc(0,150,i*15,0,Math.PI*3/2,true);
7         //context.closePath();
8         context.stroke();    
9     }

这里最后一句的stroke方法用于在显示设备中输出线条，这里少了一句closePath，即没有闭合路径。

绘制三角形：

 1 var c = document.getElementById(‘myCanvas‘);
 2     var context = c.getContext(‘2d‘);
 3      context.fillStyle = ‘red‘;
 4     context.beginPath();
 5     context.moveTo(25,25);
 6     context.lineTo(150,25);
 7     context.lineTo(25,150);
 8     context.closePath();
 9     context.fill();
10     //context.strokeStyle = ‘blue‘;
11     //context.stroke();
12 };

通过4到8行之间的代码，实现三角路径的绘制。