开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情
上一篇文章写到了fillStyle属性，接下来我们了解一下与fillStyle相类似的strokeStyle属性。
strokeStyle(行程样式)
strokeStyle与fillStyle不同的是其用arc方法是来画圆，设置图形轮廓的颜色。
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
ctx.lineWidth=2;
ctx.strokeStyle="orange";
ctx.beginPath();
// 绘制
ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx.moveTo(110, 75);
// 口 （顺时针）
ctx.arc(75, 75, 35, 0, Math.PI, false);
ctx.moveTo(65, 65);
// 左眼
ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
ctx.moveTo(95, 65);
// 右眼
ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
ctx.stroke();
</script>
如上述代码是设计一个橙色的😊，页面显示如下：
在这里 strokeStyle="orange" 便是设计笑脸的轮廓颜色；用 arc()方法 来绘制圆形。
详解：
ctx.lineWidth=2;
这行代码是控制笑脸线条轮廓的粗细。beginPath()
moveTo()
stroke()
以上都是绘制路径时所需要的函数。
绘制路径
- 首先，你需要创建路径起始点。
- 然后你使用画图命令去画出路径。
- 之后你把路径封闭。
- 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
需要用到的函数
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中
stroke()
通过线条来绘制图形轮廓
fill()
通过填充路径的内容区域生成实心的图形
moveTo(x,y)
将笔触移动到指定的坐标 x 以及 y 上
lineTo(x,y)
绘制一条从当前位置到指定 x 以及 y 位置的直线
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以 radius 为半径的圆弧（圆），从 startAngle 开始到 endAngle 结束，按照 anticlockwise 给定的方向（默认为顺时针）来生成
！！！ 该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以 x 轴为基准。参数anticlockwise为一个布尔值。为 true 时，是逆时针方向，否则顺时针方向。
案例
<body onload="draw()">
<canvas id="canvas"></canvas>
<script>
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// 填充三角形
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(105, 25);
ctx.lineTo(25, 105);
ctx.fill();
// 描边三角形
ctx.beginPath();
ctx.moveTo(125, 125);
ctx.lineTo(125, 45);
ctx.lineTo(45, 125);
ctx.closePath();
ctx.stroke();
}
}
</script>
</body>
页面输出如下：
上述案例简单的展示了各函数的详细作用以及 fill() 函数 和 stroke() 函数的对比
