今天小编跟大家讲解下有关canvas学习笔记之绘制简单路径 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关canvas学习笔记之绘制简单路径 的相关资料，希望小伙伴们看了有所帮助。
1 线段（直线路径）
绘制线段一般步骤:
moveTo(x,y) 移动画笔到指定的坐标点(x,y)lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y)stroke() 根据当前的画线样式，绘制当前或已经存在的路径2 矩形路径
绘制矩形路径一般步骤:
rect(x, y, width, height) 矩形路径，坐标点(x,y)，width height宽高stroke()或fill 根据当前的样式，绘制或填充路径也可使用前文提到的strokeRect或fillRect, 或者是通过lineTo拼接成矩形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();以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持爱蒂网。
来源：爱蒂网
