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邀請）入羣，在線解答討論數據可視化、優化圖表性能等方面的技術問題~