首页 > 代码库 > canvas基础——绘制简单的图形

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

2024-08-04 11:05:36   225人阅读

绘制直线：

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)为顺时针方向进行绘制。

绘制圆弧实例

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行之间的代码，实现三角路径的绘制。

 

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


联系
我们