Canvas 入门指南（二） — 如何使用 canvas 画一个滑稽

前情提要：Canvas 入门指南

最后效果图：

CleanShot 2021-07-14 at 16.01.37-6249726.png

教程

1. 获取 canvas 对象
2. 获取 context 对象
3. 加一点点细节
4. 大功告成

分析一下上图，基本都是圆弧。设置几个同心圆以及拼接几段圆弧即可本画。

大体轮廓

1. 首先设置填充颜色，通过取色可以了解到填充颜色为 rgb(241, 201, 96)
2. 画一个完整的圆形

context.fillStyle = 'rgb(241, 201, 96)';
context.arc(100, 100, 50, 0, 2 * Math.PI, true);
context.fill();

嘴巴

1. 画一个半圆，特点是与轮廓成一个同心圆

context.lineWidth = 2;
context.arc(100, 100, 40, 0, Math.PI, false);
context.stroke();

眼睛轮廓

眼睛轮廓会比较麻烦，分为左眼以及右眼

两个眼睛主题部分都是由两个同心圆组成

左眼

// 左眼
context.beginPath();
context.arc(75, 90, 20, Math.PI * 1.1, Math.PI * 1.9, false);
context.stroke();

context.beginPath();
context.arc(75, 90, 10, Math.PI * 1.1, Math.PI * 1.9, false); 
context.stroke();

context.beginPath();
context.arc(60, 85, 5, Math.PI, Math.PI * 2, true); // 左眼左连接处
context.stroke();

context.beginPath();
context.arc(90, 85, 5, Math.PI, Math.PI * 2, true); // 左眼 右连接处
context.stroke();

右眼：

context.beginPath();
context.arc(125, 90, 20, Math.PI * 1.1, Math.PI * 1.9, false);
context.stroke();

context.beginPath();
context.arc(125, 90, 10, Math.PI * 1.1, Math.PI * 1.9, false);
context.stroke();

context.beginPath();
context.arc(110, 85, 5, Math.PI, Math.PI * 2, true); // 右眼左连接处
context.stroke();

context.beginPath();
context.arc(140, 85, 5, Math.PI, Math.PI * 2, true); // 右眼右连接处
context.stroke();

眼球

眼球是最后一步，只是一个填充的圆形而已

// 右眼球
context.fillStyle = 'black';
context.beginPath();
context.arc(115, 80, 5, 0, Math.PI * 2, false);
context.fill();

// 左眼球
context.fillStyle = 'black';
context.beginPath();
context.arc(65, 80, 5, 0, Math.PI * 2, false);
context.fill();

小结

总体来说，这个滑稽比较简单。也有可以优化的地方，比如使用 Path2D 来保存信息再次利用。