乐趣区

关于canvas:Canvas-入门指南二-如何使用-canvas-画一个滑稽

jiezi

前情提要：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 来保存信息再次利用。

退出移动版