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

前情提要：Canvas 入门指南

最后效果图：

教程

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 来保存信息再次利用。

PS:你们看了后以为对本身有帮助能够三连留言,欢迎提出宝贵意见，也欢迎各位对相关技术有兴趣的开发者（由团队开发人员微信号x118422邀请）入群，在线解答讨论数据可视化、优化图表性能等方面的技术问题~