作者:SufiaLi | 来源:互联网 | 2023-07-21 14:40
3.1线段(直线途径)绘制线段平常步骤:moveTo(x,y)挪动画笔到指定的坐标点(x,y)lineTo(x,y)运用直线衔接当前端点和指定的坐标点(x,y)stroke()依据
3.1 线段(直线途径)
绘制线段平常步骤:
moveTo(x,y)
挪动画笔到指定的坐标点(x,y)
lineTo(x,y)
运用直线衔接当前端点和指定的坐标点(x,y)
stroke()
依据当前的画线款式,绘制当前或已存在的途径
3.2 矩形途径
绘制矩形途径平常步骤:
rect(x, y, width, height)
矩形途径,坐标点(x,y),width height宽高
stroke()
或
fill
依据当前的款式,绘制或添补途径
也可运用前文提到的
strokeRect
或
fillRect
, 或者是经由过程
lineTo
拼接成矩形
3.3 圆弧途径
先看下绘制圆弧的api:
- ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
x, y
圆弧中间, radius
圆弧半径, startAngle
起始点, endAngle
圆弧尽头, anticlockwise
默以为顺时针, true逆时针
CSS
中做扭转用到都是角度(deg
),然则arc
函数中示意角的单元是弧度
,不是角度。角度与弧度的js表达式: 弧度 = (Math.PI/180) * 角度(deg)
。
这里弧度是以x轴正方向
为基准、默许顺时针扭转的角度来盘算
图示:
(图片来自大漠)
ctx.beginPath();
ctx.arc(200, 100, 100, 0, Math.PI / 2, false);
ctx.closePath();
ctx.stroke();
ctx.fill();
arc示例