前情提要：Canvas 入門指南
最后效果圖：
CleanShot 2021-07-14 at 16.01.37-6249726.png
教程
- 獲取 canvas 對象
- 獲取 context 對象
- 加一點點細節(jié)
- 大功告成
分析一下上圖，基本都是圓弧。設置幾個同心圓以及拼接幾段圓弧即可本畫硕蛹。
大體輪廓
- 首先設置填充顏色兽赁，通過取色可以了解到填充顏色為
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();
小結
總體來說，這個滑稽比較簡單丧裁。也有可以優(yōu)化的地方，比如使用 Path2D 來保存信息再次利用含衔。
