Canvas從入門到小豬頭
作者：執鳶者
Canvas(畫布)是在HTML5中新增的標簽用于在網頁實時生成圖像，可以操作圖像內容，是一個可以用JavaScript操作的位圖(bitmap)。
通過本文你將了解canvas簡介及其比較常用的方法，并利用canvas實現一個小豬頭。
一、Canvas簡介
1.1 什么是canvas
Canvas(畫布)是在HTML5中新增的標簽用于在網頁實時生成圖像，可以操作圖像內容，是一個可以用JavaScript操作的位圖(bitmap)。
1.2 canvas的坐標系統
canvas的坐標系統如下圖所示，其具有如下特點：
- x軸正方向向右、y軸正方向向下
- 畫布的原點在左上角
- 橫縱坐標單位為像素
- 每個軸的最小單元為一個像素(柵格)
1.3 canvas的繪制流程
- 創建一個標簽
- 獲取canvas元素對應的DOM對象，這是一個Canvas對象
- 調用Canvas對象的getContext()方法，該方法返回一個CanvasRenderingContext2D對象，該對象即可繪制圖形
- 調用CanvasRenderingContext2D對象的方法繪圖
1.4 canvas的應用領域
canvas這個神奇的東西有很多領域可以得到應用，下面我們一起嘮一嘮。
- 游戲：canvas 在基于 Web 的圖像顯示方面比 Flash 更加立體、更加精巧，canvas 游戲在流暢度和跨平臺方面更優秀，例如這25款canvas游戲
- 可視化的庫：Echart
- banner廣告：Canvas 實現動態的廣告效果非常合適
- 圖形編輯器：后續Photoshop能夠100%基于Web實現
- 微信讀書、騰訊文檔均是通過canvas實現
二、基礎功能
通過第一章對canvas有了初步的認識，本章就按照一個人繪制一幅畫的思路進行演化，逐步了解canvas的基本功能，從而更好的使用它實現一些酷炫的效果。
2.1 坐標系選擇
當要繪制一幅畫時首先要確定坐標系，只有選擇好了坐標系之后才好動筆，在canvas中默認坐標系在左上角(X軸正方向向右、Y軸正方向向下)，可是有的時候需要變換坐標系才能更方便的實現所需的效果，此時需要變換坐標系，canvas提供了以下幾種變換坐標系的方式：
- translate(dx，dy)：平移坐標系。相當于把原來位于(0，0)位置的坐標原點平移到(dx、dy)點。
- rotate(angle)：旋轉坐標系。該方法控制坐標系統順時針旋轉angle弧度。
- scale(sx，sy)：縮放坐標系。該方法控制坐標系統水平方向上縮放sx，垂直方向上縮放sy。
- transform(a,b,c,d,e,f)：允許縮放、旋轉、移動并傾斜當前的環境坐標系，其中a表示水平縮放、b表示水平切斜、c表示垂直切斜、d表示垂直縮放、e表示水平移動、f表示垂直移動。
- function main() {
- const canvas = document.getElementById('canvasId');
- const ctx = canvas.getContext('2d');
- ctx.lineWidth = 4;
- // 默認
- ctx.save();
- ctx.strokeStyle = '#F00';
- drawCoordiante(ctx);
- ctx.restore();
- // 平移
- ctx.save();
- ctx.translate(150, 150);
- ctx.strokeStyle = '#0F0';
- drawCoordiante(ctx);
- ctx.restore();
- // 旋轉
- ctx.save();
- ctx.translate(300, 300);
- ctx.rotate(-Math.PI / 2);
- ctx.strokeStyle = '#00F';
- drawCoordiante(ctx);
- ctx.restore();
- // 縮放
- ctx.save();
- ctx.translate(400, 400);
- ctx.rotate(-Math.PI / 2);
- ctx.scale(0.5, 0.5);
- ctx.strokeStyle = '#000';
- drawCoordiante(ctx);
- ctx.restore();
- }
- function drawCoordiante(ctx) {
- ctx.beginPath();
- ctx.moveTo(0, 0);
- ctx.lineTo(120, 0);
- ctx.moveTo(0, 0);
- ctx.lineTo(0, 80);
- ctx.closePath();
- ctx.stroke();
- }
- main();
2.2 圖形繪制
坐標系選擇好了之后，就要開始動筆創作大作了，那么canvas到底允許繪制哪些內容呢?
直線
- function drawLine(ctx, startX, startY, endX, endY) {
- ctx.moveTo(startX, startY);
- ctx.lineTo(endX, endY);
- ctx.stroke();
- }
圓弧
- function drawCircle(ctx, x, y, R, startAngle, endAngle) {
- ctx.arc(x, y, R, startAngle, endAngle);
- ctx.stroke();
- }
曲線
- // 貝濟埃曲線
- function drawBezierCurve(ctx, cpX1, cpY1, cpX, cpY2, endX, endY) {
- ctx.bezierCurveTo(cpX1, cpY1, cpX, cpY2, endX, endY);
- ctx.stroke();
- }
- // 二次曲線
- function drawQuadraticCurve(ctx, cpX, cpY, endX, endY) {
- ctx.quadraticCurveTo(cpX, cpY, endX, endY);
- ctx.stroke();
- }
矩形
- // 填充矩形
- function drawFillRect(ctx, x, y, width, height) {
- ctx.fillRect(x, y, width, height);
- }
- // 邊框矩形
- function drawStrokeRect(ctx, x, y, width, height) {
- ctx.strokeRect( x, y, width, height);
- }
字符串
- // 填充字符串
- function drawFillText(ctx, text, x, y) {
- ctx.fillText(text, x, y);
- }
- // 邊框字符串
- function drawStrokeText(ctx, text, x, y) {
- ctx.strokeText(text, x, y);
- }
復雜圖形繪制——路徑
- // 利用路徑繪制
- function drawFigureByPath(ctx) {
- ctx.beginPath();
- ctx.moveTo(100, 400);
- ctx.lineTo(200, 450);
- ctx.lineTo(150, 480);
- ctx.closePath();
- ctx.fill();
- }
- function main() {
- const canvas = document.getElementById('canvasId');
- const ctx = canvas.getContext('2d');
- ctx.lineWidth = 2;
- ctx.strokeStyle = '#F00';
- ctx.fillStyle = '#F00';
- ctx.font = 'normal 50px 宋體';
- drawLine(ctx, 50, 10, 150, 10);
- ctx.moveTo(150, 100);
- drawCircle(ctx, 100, 100, 50, 0, Math.PI);
- ctx.moveTo(300, 100);
- drawCircle(ctx, 250, 100, 50, 0, Math.PI * 2);
- ctx.moveTo(350, 150);
- drawBezierCurve(ctx, 200, 200, 450, 250, 300, 300);
- ctx.moveTo(50, 250);
- drawQuadraticCurve(ctx, 50, 400, 80, 400);
- drawFillRect(ctx, 100, 300, 100, 50);
- drawStrokeRect(ctx, 300, 300, 100, 50);
- drawFillText(ctx, 'I', 100, 400);
- drawStrokeText(ctx, 'I', 300, 400);
- drawFigureByPath(ctx);
- }
2.3 填充風格
利用canvas繪制圖形時勢必要上點顏料，通過設置fillStyle屬性即可設置對應的顏料，對于顏料值主要有以下四種：純顏色、線性漸變顏色、徑向漸變顏色、位圖。
純顏色
- function useColorFill(ctx) {
- ctx.save();
- ctx.fillStyle = '#F00';
- ctx.fillRect(10, 10, 100, 100);
- ctx.restore();
- }
線性漸變顏色
- function useLinearGradientFill(ctx) {
- ctx.save();
- const lg = ctx.createLinearGradient(110, 10, 210, 10);
- lg.addColorStop(0.2, '#F00');
- lg.addColorStop(0.5, '#0F0');
- lg.addColorStop(0.9, '#00F');
- ctx.fillStyle = lg;
- ctx.fillRect(120, 10, 100, 100);
- ctx.restore();
- }
徑向漸變顏色
- function useRadialGradientFill(ctx) {
- ctx.save();
- const lg = ctx.createRadialGradient(260, 60, 10, 260, 60, 60);
- lg.addColorStop(0.2, '#F00');
- lg.addColorStop(0.5, '#0F0');
- lg.addColorStop(0.9, '#00F');
- ctx.fillStyle = lg;
- ctx.fillRect(230, 10, 100, 100);
- ctx.restore();
- }
位圖填充
- function useImageFill(ctx) {
- ctx.save();
- const image = new Image();
- image.src = 'https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=442547030,98631113&fm=58';
- image.onload = function () {
- // 創建位圖填充
- const imgPattern = ctx.createPattern(image, 'repeat');
- ctx.fillStyle = imgPattern;
- ctx.fillRect(340, 10, 100, 100);
- ctx.restore();
- }
- }
2.4 臨時保存
用一只畫筆在畫某個美女時，忽然來了靈感需要畫另一個帥哥，這個時候又不想放棄這個美女，則就需要將當前畫美女的顏料、坐標等狀態進行暫存，等到畫完帥哥后恢復狀態進行美女的繪制。在canvas中可以通過save()和restore()方法實現，調用save()方法后將這一時刻的設置放到一個暫存棧中，然后可以放心的修改上下文，在需要繪制之前的上下文時，可以調用restore()方法。
- // 從左往右是依次繪制（中間為用新的樣式填充，最后一個是恢復到原來樣式填充）
- function main() {
- const canvas = document.getElementById('canvasId');
- const ctx = canvas.getContext('2d');
- ctx.fillStyle = '#F00';
- ctx.fillRect(10, 10, 100, 100);
- ctx.save();
- ctx.fillStyle = '#0F0';
- ctx.fillRect(150, 10, 100, 100);
- ctx.restore();
- ctx.fillRect(290, 10, 100, 100);
- }
2.5 引入外部圖像
有的時候需要引入外部圖片，然后對外部圖片進行像素級別的處理，最后進行保存。
- 繪制圖像：drawImage
- 取得圖像數據：getIamgeData
- 將修改后的數據重新填充到Canvas中：putImageData
- 輸出位圖：toDataURL
- function main() {
- const canvas = document.getElementById('canvasId');
- const ctx = canvas.getContext('2d');
- const image = document.getElementById('image');
- // 繪制圖像
- ctx.drawImage(image, 0, 0);
- // 獲取圖像數據
- const imageData = ctx.getImageData(0, 0, image.width, image.height);
- const data = imageData.data;
- for (let i = 0, len = data.length; i < len; i += 4) {
- const red = data[i];
- const green = data[i + 1];
- const blue = data[i + 2];
- const average = Math.floor((red + green + blue) / 3);
- data[i] = average;
- data[i + 1] = average;
- data[i + 2] = average;
- }
- imageData.data = data;
- ctx.putImageData(imageData, 0, 0);
- document.getElementById('result').src = canvas.toDataURL('image/png');
- }
三、豬頭實戰
學習了這么多，就利用canvas繪制一個豬頭吧，畢竟每個程序員身邊肯定有一個陪伴自己的小胖豬，嘿嘿。
- function main() {
- const canvas = document.getElementById('canvasId');
- const ctx = canvas.getContext('2d');
- ctx.lineWidth = 4;
- ctx.strokeStyle = '#000';
- ctx.fillStyle = '#ffd8e1';
- ctx.translate(260, 20);
- drawPigEar(ctx);
- ctx.save();
- ctx.rotate(Math.PI / 2);
- drawPigEar(ctx);
- ctx.restore();
- drawPigFace(ctx);
- ctx.save();
- ctx.translate(-100, -100);
- drawPigEye(ctx);
- ctx.restore();
- ctx.save();
- ctx.translate(100, -100);
- drawPigEye(ctx);
- ctx.restore();
- ctx.save();
- ctx.translate(0, 60);
- drawPigNose(ctx);
- ctx.restore();
- }
- function drawPigEar(ctx) {
- ctx.save();
- ctx.beginPath();
- ctx.arc(-250, 0, 250, 0, -Math.PI / 2, true);
- ctx.arc(0, -250, 250, -Math.PI, Math.PI / 2, true);
- ctx.closePath();
- ctx.fill();
- ctx.stroke();
- ctx.restore();
- }
- function drawPigFace(ctx) {
- ctx.save();
- ctx.beginPath();
- ctx.arc(0, 0, 250, 0, Math.PI * 2);
- ctx.fill();
- ctx.stroke();
- ctx.closePath();
- ctx.restore();
- }
- function drawPigEye(ctx) {
- ctx.save();
- ctx.fillStyle = '#000';
- ctx.beginPath();
- ctx.arc(0, 0, 20, 0, Math.PI * 2);
- ctx.closePath();
- ctx.fill();
- ctx.restore();
- }
- function drawPigNose(ctx) {
- ctx.save();
- ctx.fillStyle = '#fca7aa';
- ctx.beginPath();
- ctx.ellipse(0, 0, 150, 100, 0, 0, Math.PI * 2);
- ctx.closePath();
- ctx.fill();
- ctx.stroke();
- ctx.save();
- ctx.translate(-60, 0);
- drawPigNostrils(ctx);
- ctx.restore();
- ctx.save();
- ctx.translate(60, 0);
- drawPigNostrils(ctx);
- ctx.restore();
- ctx.restore();
- }
- function drawPigNostrils(ctx) {
- ctx.save();
- ctx.fillStyle = '#b55151';
- ctx.beginPath();
- ctx.ellipse(0, 0, 40, 60, 0, 0, Math.PI * 2);
- ctx.closePath();
- ctx.fill();
- ctx.stroke();
- ctx.restore();
- }
- main();
本文轉載自微信公眾號「執鳶者」，可以通過以下二維碼關注。轉載本文請聯系執鳶者公眾號。
責任編輯：武曉燕
來源：
執鳶者
