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

本文主要是介绍Canvas 入门指南（二） — 如何使用 canvas 画一个滑稽，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前情提要：Canvas 入门指南

最后效果图：

在这里插入图片描述

教程

获取 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();