canvas学习笔记-绘制简单路径
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示例
相关推荐
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
jinxiutong 2020-05-10
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06
northwindx 2020-04-25