beginPath()
新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
moveTo(x, y)
把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标
closePath()
闭合路径之后，图形绘制命令又重新指向到上下文中
stroke()
通过线条来绘制图形轮廓
fill()
通过填充路径的内容区域生成实心的图形
1.使用arc方法绘制圆形
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>canvas元素arc示例</title>
<script language="JavaScript">
function draw(id)
{
var canvas = document.getElementById(id);
if (canvas == null) return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 200, 200);
context.beginPath(); //该方法不使用参数。通过调用该方法，开始路径的创建
context.arc( 100, 100,50, 0, Math.PI*2, true);
//context.arc(x,y,radius, startAngle, endAngle,anticlockwise)
//该方法使用六个参数，x为绘制圆形的起点横坐标，y为绘制圆形的起点纵坐标，radius
//为圆形半径，startAngle为开始角度，endAngle为结束角度，anticlockwise为是否
//按顺时针方向进行绘制。
context.closePath();
//路径创建完成后，使用图形上下文对象的closePath方法将路径关闭
//将路径关闭后，路径的创建工作就完成了，但是需要注意的是，这时只是路径创建完毕而已，还没有真正绘制图形。
//进行圆形绘制，并设定绘制样式。
context.fillStyle = 'rgba(255, 0, 0, 0.25)';
context.fill();
}
</script>
</head>
<body onload="draw('canvas');">
<h1>canvas中画圆形</h1>
<canvas id="canvas" width="400" height="300" />
</body>
</html>
效果：
微信图片_20200604173003.png
2.使用moveTo与lineTo路径绘制火柴人
moveTo（x，y）：不绘制，只是将当前位置移动到新的目标坐标（x，y）。
lineTo（x，y）：不仅将当前位置移动到新的目标坐标（x，y），而且在两个坐标之间画一条直线。
简而言之，上面两个函数的区别在于：moveTo就像是提起画笔，移动到新位置，而lineTo告诉canvas用画笔从纸上的旧坐标画条直线到新坐标。需要提醒大家注意的是，不管调用它们哪一个，都不会真正画出图形，因为我们还没有调用stroke或者fill函数。目前，我们只是在定义路径的位置，以便后面绘制时使用。
我们再来看一个特殊的路径函数叫做closePath。这个函数的行为和lineTo很像，唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭的区域，这对将来的填充和描边都非常有用。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>canvas元素示例</title>
<script >
function draw(id)
{
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "#FFF000";
context.fillRect(0, 0, 300, 300);
context.beginPath();
context.strokeStyle = '#c00';
context.lineWidth = 3;
context.arc(100, 50, 30, 0, Math.PI*2, true); //头
context.fill();
context.stroke();
context.beginPath();
context.strokeStyle = '#c00';
context.lineWidth = 3;
context.arc(100, 50, 20, 0, Math.PI, false);//嘴
context.fill();
context.stroke();
context.beginPath();//眼睛
context.fillStyle = '#c00';
context.arc(90, 45, 3, 0, Math.PI*2, true);
context.fill();
context.stroke();
context.moveTo(113, 45);
context.arc(110, 45, 3, 0, Math.PI*2, true);
context.fill();
context.stroke();
context.beginPath();
context.moveTo(100, 80); // move to neck
context.lineTo(100, 180); // body
context.lineTo(75, 250); // 绘制左腿
context.moveTo(100, 180); // move to hips
context.lineTo(125, 250); // 绘制右腿
context.moveTo(100, 90); // move to shoulders
context.lineTo(75, 140); // 绘制左胳膊
context.moveTo(100, 90); // back to shoulders
context.lineTo(125, 140); // 绘制右胳膊
context.stroke();
}
context.closePath();
</script>
</head>
<body onload="draw('canvas');">
<h1>canvas中绘制火柴人</h1>
<canvas id="canvas" width="400" height="300" />
</body>
</html>
效果
微信图片_20200605104349.png
3. 贝塞尔和二次方曲线
绘制贝塞尔曲线主要使用bezierCurveTo方法。该方法可以说是lineTo的曲线版，将从当前坐标点到指定坐标点中间的贝塞尔曲线追加到路径中。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
喜欢可关注公众号“十斤代码”
公众号.jpg
回复“领取前端电子书”可免费领取知识哦~~
前端电子书.png
