canvas线与弧

Posted 2020-10-09 corn林

1、线

var canvas = document.getElementById(‘canvas‘);
canvas.width = 800;//canvas宽
canvas.height = 500;//canvas高
var context = canvas.getContext(‘2d‘);//获取绘图上下文环境

context.beginPath();//声明开始绘制新的路径
context.moveTo(100,100);//线起点
context.lineTo(700,400);//线转折
context.lineTo(100,400);//线转折
context.lineTo(100,100);//线终点
context.closePath();//路径定义结束

context.lineWidth = 5;//线宽
context.strokeStyle = ‘#005588‘;//线颜色
context.stroke();//绘制线

2、填充

context.fillStyle = ‘rgb(2,100,30)‘;//填充色
context.fill();//填充

3、圆弧

语法：context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlosewise = false);

注：弧度值有五个（0*Math.PI, 0.5*Math.PI, 1*Math.PI, 1.5*Math.PI,  2*Math.PI），位置上对应圆的0°，90°，180°，270°，360°。

当顺时针绘制时（默认），弧度值按顺序，当逆时针绘制，则绘制顺序为（2*Math.PI, 1.5*Math.PI, 1*Math.PI, 0.5*Math.PI, 0*Math.PI）。

context.beginPath();
context.lineWidth = 2;
context.strokeStyle = "#005588";
context.arc(600,100,50,0*Math.PI,1.5*Math.PI);
context.closePath();//closePath()会自动帮我们封闭路径的首尾
context.stroke();