前情提要:Canvas 入门指南
最后效果图:
CleanShot 2021-07-14 at 16.01.37-6249726.png
教程
- 获取 canvas 对象
- 获取 context 对象
- 加一点点细节
- 大功告成
分析一下上图,基本都是圆弧。设置几个同心圆以及拼接几段圆弧即可本画。
大体轮廓
- 首先设置填充颜色,通过取色可以了解到填充颜色为
rgb(241, 201, 96)
- 画一个完整的圆形
context.fillStyle = 'rgb(241, 201, 96)';
context.arc(100, 100, 50, 0, 2 * Math.PI, true);
context.fill();
嘴巴
- 画一个半圆,特点是与轮廓成一个同心圆
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 来保存信息再次利用。