自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

聊聊Canvas從入門(mén)到豬頭

作者：執(zhí)鳶者
網(wǎng)絡(luò) 通信技術(shù)
Canvas(畫(huà)布)是在HTML5中新增的標(biāo)簽用于在網(wǎng)頁(yè)實(shí)時(shí)生成圖像，可以操作圖像內(nèi)容，是一個(gè)可以用JavaScript操作的位圖(bitmap)。

[[420990]]

一、Canvas簡(jiǎn)介

1.1 什么是canvas

Canvas(畫(huà)布)是在HTML5中新增的標(biāo)簽用于在網(wǎng)頁(yè)實(shí)時(shí)生成圖像，可以操作圖像內(nèi)容，是一個(gè)可以用JavaScript操作的位圖(bitmap)。

1.2 canvas的坐標(biāo)系統(tǒng)

canvas的坐標(biāo)系統(tǒng)如下圖所示，其具有如下特點(diǎn)：

  • x軸正方向向右、y軸正方向向下
  • 畫(huà)布的原點(diǎn)在左上角
  • 橫縱坐標(biāo)單位為像素
  • 每個(gè)軸的最小單元為一個(gè)像素(柵格)

1.3 canvas的繪制流程

  • 創(chuàng)建一個(gè)標(biāo)簽
  • 獲取canvas元素對(duì)應(yīng)的DOM對(duì)象，這是一個(gè)Canvas對(duì)象
  • 調(diào)用Canvas對(duì)象的getContext()方法，該方法返回一個(gè)CanvasRenderingContext2D對(duì)象，該對(duì)象即可繪制圖形
  • 調(diào)用CanvasRenderingContext2D對(duì)象的方法繪圖

1.4 canvas的應(yīng)用領(lǐng)域

canvas這個(gè)神奇的東西有很多領(lǐng)域可以得到應(yīng)用，下面我們一起嘮一嘮。

  • 游戲：canvas 在基于 Web 的圖像顯示方面比 Flash 更加立體、更加精巧，canvas 游戲在流暢度和跨平臺(tái)方面更優(yōu)秀，例如這25款canvas游戲
  • 可視化的庫(kù)：Echart
  • banner廣告：Canvas 實(shí)現(xiàn)動(dòng)態(tài)的廣告效果非常合適
  • 圖形編輯器：后續(xù)Photoshop能夠100%基于Web實(shí)現(xiàn)
  • 微信讀書(shū)、騰訊文檔均是通過(guò)canvas實(shí)現(xiàn)

二、基礎(chǔ)功能

通過(guò)第一章對(duì)canvas有了初步的認(rèn)識(shí)，本章就按照一個(gè)人繪制一幅畫(huà)的思路進(jìn)行演化，逐步了解canvas的基本功能，從而更好的使用它實(shí)現(xiàn)一些酷炫的效果。

2.1 坐標(biāo)系選擇

當(dāng)要繪制一幅畫(huà)時(shí)首先要確定坐標(biāo)系，只有選擇好了坐標(biāo)系之后才好動(dòng)筆，在canvas中默認(rèn)坐標(biāo)系在左上角(X軸正方向向右、Y軸正方向向下)，可是有的時(shí)候需要變換坐標(biāo)系才能更方便的實(shí)現(xiàn)所需的效果，此時(shí)需要變換坐標(biāo)系，canvas提供了以下幾種變換坐標(biāo)系的方式：

  • translate(dx，dy)：平移坐標(biāo)系。相當(dāng)于把原來(lái)位于(0，0)位置的坐標(biāo)原點(diǎn)平移到(dx、dy)點(diǎn)。
  • rotate(angle)：旋轉(zhuǎn)坐標(biāo)系。該方法控制坐標(biāo)系統(tǒng)順時(shí)針旋轉(zhuǎn)angle弧度。
  • scale(sx，sy)：縮放坐標(biāo)系。該方法控制坐標(biāo)系統(tǒng)水平方向上縮放sx，垂直方向上縮放sy。
  • transform(a,b,c,d,e,f)：允許縮放、旋轉(zhuǎn)、移動(dòng)并傾斜當(dāng)前的環(huán)境坐標(biāo)系，其中a表示水平縮放、b表示水平切斜、c表示垂直切斜、d表示垂直縮放、e表示水平移動(dòng)、f表示垂直移動(dòng)。

  1. function main() { 
  2.     const canvas = document.getElementById('canvasId'); 
  3.     const ctx = canvas.getContext('2d'); 
  4.     ctx.lineWidth = 4; 
  5.     // 默認(rèn) 
  6.     ctx.save(); 
  7.     ctx.strokeStyle = '#F00'; 
  8.     drawCoordiante(ctx); 
  9.     ctx.restore(); 
  10.  
  11.     // 平移 
  12.     ctx.save(); 
  13.     ctx.translate(150, 150); 
  14.     ctx.strokeStyle = '#0F0'; 
  15.     drawCoordiante(ctx); 
  16.     ctx.restore(); 
  17.  
  18.     // 旋轉(zhuǎn) 
  19.     ctx.save(); 
  20.     ctx.translate(300, 300); 
  21.     ctx.rotate(-Math.PI / 2); 
  22.     ctx.strokeStyle = '#00F'; 
  23.     drawCoordiante(ctx); 
  24.     ctx.restore(); 
  25.  
  26.     // 縮放 
  27.     ctx.save(); 
  28.     ctx.translate(400, 400); 
  29.     ctx.rotate(-Math.PI / 2); 
  30.     ctx.scale(0.5, 0.5); 
  31.     ctx.strokeStyle = '#000'; 
  32.     drawCoordiante(ctx); 
  33.     ctx.restore(); 
  34. } 
  35.  
  36. function drawCoordiante(ctx) { 
  37.     ctx.beginPath(); 
  38.     ctx.moveTo(0, 0); 
  39.     ctx.lineTo(120, 0); 
  40.     ctx.moveTo(0, 0); 
  41.     ctx.lineTo(0, 80); 
  42.     ctx.closePath(); 
  43.     ctx.stroke(); 
  44. } 
  45.  
  46. main(); 

2.2 圖形繪制

坐標(biāo)系選擇好了之后，就要開(kāi)始動(dòng)筆創(chuàng)作大作了，那么canvas到底允許繪制哪些內(nèi)容呢?

直線(xiàn)

  1. function drawLine(ctx, startX, startY, endX, endY) { 
  2.     ctx.moveTo(startX, startY); 
  3.     ctx.lineTo(endX, endY); 
  4.     ctx.stroke(); 
  5. } 

圓弧

  1. function drawCircle(ctx, x, y, R, startAngle, endAngle) { 
  2.     ctx.arc(x, y, R, startAngle, endAngle); 
  3.     ctx.stroke(); 
  4. } 

曲線(xiàn)

  1. // 貝濟(jì)埃曲線(xiàn) 
  2. function drawBezierCurve(ctx, cpX1, cpY1, cpX, cpY2, endX, endY) { 
  3.     ctx.bezierCurveTo(cpX1, cpY1, cpX, cpY2, endX, endY); 
  4.     ctx.stroke(); 
  5. } 
  6. // 二次曲線(xiàn) 
  7. function drawQuadraticCurve(ctx, cpX, cpY, endX, endY) { 
  8.     ctx.quadraticCurveTo(cpX, cpY, endX, endY); 
  9.     ctx.stroke(); 
  10. } 

矩形

  1. // 填充矩形 
  2. function drawFillRect(ctx, x, y, width, height) { 
  3.     ctx.fillRect(x, y, width, height); 
  4. } 
  5. // 邊框矩形 
  6. function drawStrokeRect(ctx, x, y, width, height) { 
  7.     ctx.strokeRect( x, y, width, height); 
  8. } 

字符串

  1. / 填充字符串 
  2. function drawFillText(ctx, text, x, y) { 
  3.     ctx.fillText(text, x, y); 
  4. } 
  5. // 邊框字符串 
  6. function drawStrokeText(ctx, text, x, y) { 
  7.     ctx.strokeText(text, x, y); 
  8. } 

復(fù)雜圖形繪制——路徑

  1. // 利用路徑繪制 
  2. function drawFigureByPath(ctx) { 
  3.     ctx.beginPath(); 
  4.     ctx.moveTo(100, 400); 
  5.     ctx.lineTo(200, 450); 
  6.     ctx.lineTo(150, 480); 
  7.     ctx.closePath(); 
  8.     ctx.fill(); 
  9. } 

  1. function main() { 
  2.     const canvas = document.getElementById('canvasId'); 
  3.     const ctx = canvas.getContext('2d'); 
  4.     ctx.lineWidth = 2; 
  5.     ctx.strokeStyle = '#F00'; 
  6.     ctx.fillStyle = '#F00'; 
  7.     ctx.font = 'normal 50px 宋體'; 
  8.     drawLine(ctx, 50, 10, 150, 10); 
  9.     ctx.moveTo(150, 100); 
  10.     drawCircle(ctx, 100, 100, 50, 0, Math.PI); 
  11.     ctx.moveTo(300, 100); 
  12.     drawCircle(ctx, 250, 100, 50, 0, Math.PI * 2); 
  13.     ctx.moveTo(350, 150); 
  14.     drawBezierCurve(ctx, 200, 200, 450, 250, 300, 300); 
  15.     ctx.moveTo(50, 250); 
  16.     drawQuadraticCurve(ctx, 50, 400, 80, 400); 
  17.     drawFillRect(ctx, 100, 300, 100, 50); 
  18.     drawStrokeRect(ctx, 300, 300, 100, 50); 
  19.     drawFillText(ctx, 'I', 100, 400); 
  20.     drawStrokeText(ctx, 'I', 300, 400); 
  21.     drawFigureByPath(ctx); 
  22. } 

2.3 填充風(fēng)格

利用canvas繪制圖形時(shí)勢(shì)必要上點(diǎn)顏料，通過(guò)設(shè)置fillStyle屬性即可設(shè)置對(duì)應(yīng)的顏料，對(duì)于顏料值主要有以下四種：純顏色、線(xiàn)性漸變顏色、徑向漸變顏色、位圖。

純顏色

  1. function useColorFill(ctx) { 
  2.     ctx.save(); 
  3.     ctx.fillStyle = '#F00'; 
  4.     ctx.fillRect(10, 10, 100, 100); 
  5.     ctx.restore(); 
  6. } 

線(xiàn)性漸變顏色

  1. function useLinearGradientFill(ctx) { 
  2.     ctx.save(); 
  3.     const lg = ctx.createLinearGradient(110, 10, 210, 10); 
  4.     lg.addColorStop(0.2, '#F00'); 
  5.     lg.addColorStop(0.5, '#0F0'); 
  6.     lg.addColorStop(0.9, '#00F'); 
  7.     ctx.fillStyle = lg; 
  8.     ctx.fillRect(120, 10, 100, 100); 
  9.     ctx.restore(); 
  10. } 

徑向漸變顏色

  1. function useRadialGradientFill(ctx) { 
  2.     ctx.save(); 
  3.     const lg = ctx.createRadialGradient(260, 60, 10, 260, 60, 60); 
  4.     lg.addColorStop(0.2, '#F00'); 
  5.     lg.addColorStop(0.5, '#0F0'); 
  6.     lg.addColorStop(0.9, '#00F'); 
  7.     ctx.fillStyle = lg; 
  8.     ctx.fillRect(230, 10, 100, 100); 
  9.     ctx.restore(); 
  10. } 

位圖填充

  1. function useImageFill(ctx) { 
  2.     ctx.save(); 
  3.     const image = new Image(); 
  4.     image.src = 'https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=442547030,98631113&fm=58'; 
  5.     image.onload = function () { 
  6.         // 創(chuàng)建位圖填充 
  7.         const imgPattern = ctx.createPattern(image, 'repeat'); 
  8.         ctx.fillStyle = imgPattern; 
  9.         ctx.fillRect(340, 10, 100, 100); 
  10.         ctx.restore(); 
  11.     } 
  12. } 

2.4 臨時(shí)保存

用一只畫(huà)筆在畫(huà)某個(gè)美女時(shí)，忽然來(lái)了靈感需要畫(huà)另一個(gè)帥哥，這個(gè)時(shí)候又不想放棄這個(gè)美女，則就需要將當(dāng)前畫(huà)美女的顏料、坐標(biāo)等狀態(tài)進(jìn)行暫存，等到畫(huà)完帥哥后恢復(fù)狀態(tài)進(jìn)行美女的繪制。在canvas中可以通過(guò)save()和restore()方法實(shí)現(xiàn)，調(diào)用save()方法后將這一時(shí)刻的設(shè)置放到一個(gè)暫存棧中，然后可以放心的修改上下文，在需要繪制之前的上下文時(shí)，可以調(diào)用restore()方法。

  1. // 從左往右是依次繪制（中間為用新的樣式填充，最后一個(gè)是恢復(fù)到原來(lái)樣式填充） 
  2. function main() { 
  3.     const canvas = document.getElementById('canvasId'); 
  4.     const ctx = canvas.getContext('2d'); 
  5.     ctx.fillStyle = '#F00'; 
  6.     ctx.fillRect(10, 10, 100, 100); 
  7.     ctx.save(); 
  8.     ctx.fillStyle = '#0F0'; 
  9.     ctx.fillRect(150, 10, 100, 100); 
  10.     ctx.restore(); 
  11.     ctx.fillRect(290, 10, 100, 100); 
  12. } 

2.5 引入外部圖像

有的時(shí)候需要引入外部圖片，然后對(duì)外部圖片進(jìn)行像素級(jí)別的處理，最后進(jìn)行保存。

  • 繪制圖像：drawImage
  • 取得圖像數(shù)據(jù)：getIamgeData
  • 將修改后的數(shù)據(jù)重新填充到Canvas中：putImageData
  • 輸出位圖：toDataURL

  1. function main() { 
  2.     const canvas = document.getElementById('canvasId'); 
  3.     const ctx = canvas.getContext('2d'); 
  4.     const image = document.getElementById('image'); 
  5.     // 繪制圖像 
  6.     ctx.drawImage(image, 0, 0); 
  7.     // 獲取圖像數(shù)據(jù) 
  8.     const imageData = ctx.getImageData(0, 0, image.width, image.height); 
  9.     const data = imageData.data; 
  10.     for (let i = 0, len = data.length; i < len; i += 4) { 
  11.         const red = data[i]; 
  12.         const green = data[i + 1]; 
  13.         const blue = data[i + 2]; 
  14.  
  15.         const average = Math.floor((red + green + blue) / 3); 
  16.  
  17.         data[i] = average; 
  18.         data[i + 1] = average; 
  19.         data[i + 2] = average; 
  20.     } 
  21.  
  22.     imageData.data = data; 
  23.     ctx.putImageData(imageData, 0, 0); 
  24.     document.getElementById('result').src = canvas.toDataURL('image/png'); 
  25. } 

三、豬頭實(shí)戰(zhàn)

學(xué)習(xí)了這么多，就利用canvas繪制一個(gè)豬頭吧，畢竟每個(gè)程序員身邊肯定有一個(gè)陪伴自己的小胖豬，嘿嘿。

  1. function main() { 
  2.     const canvas = document.getElementById('canvasId'); 
  3.     const ctx = canvas.getContext('2d'); 
  4.     ctx.lineWidth = 4; 
  5.     ctx.strokeStyle = '#000'; 
  6.     ctx.fillStyle = '#ffd8e1'; 
  7.     ctx.translate(260, 20); 
  8.     drawPigEar(ctx); 
  9.     ctx.save(); 
  10.     ctx.rotate(Math.PI / 2); 
  11.     drawPigEar(ctx); 
  12.     ctx.restore(); 
  13.     drawPigFace(ctx); 
  14.     ctx.save(); 
  15.     ctx.translate(-100, -100); 
  16.     drawPigEye(ctx); 
  17.     ctx.restore(); 
  18.     ctx.save(); 
  19.     ctx.translate(100, -100); 
  20.     drawPigEye(ctx); 
  21.     ctx.restore(); 
  22.     ctx.save(); 
  23.     ctx.translate(0, 60); 
  24.     drawPigNose(ctx); 
  25.     ctx.restore(); 
  26. } 
  27.  
  28. function drawPigEar(ctx) { 
  29.     ctx.save(); 
  30.     ctx.beginPath(); 
  31.     ctx.arc(-250, 0, 250, 0, -Math.PI / 2, true); 
  32.     ctx.arc(0, -250, 250, -Math.PI, Math.PI / 2, true); 
  33.     ctx.closePath(); 
  34.     ctx.fill(); 
  35.     ctx.stroke(); 
  36.     ctx.restore(); 
  37. } 
  38.  
  39. function drawPigFace(ctx) { 
  40.     ctx.save(); 
  41.     ctx.beginPath(); 
  42.     ctx.arc(0, 0, 250, 0, Math.PI * 2); 
  43.     ctx.fill(); 
  44.     ctx.stroke(); 
  45.     ctx.closePath(); 
  46.     ctx.restore(); 
  47. } 
  48.  
  49. function drawPigEye(ctx) { 
  50.     ctx.save(); 
  51.     ctx.fillStyle = '#000'; 
  52.     ctx.beginPath(); 
  53.     ctx.arc(0, 0, 20, 0, Math.PI * 2); 
  54.     ctx.closePath(); 
  55.     ctx.fill(); 
  56.     ctx.restore(); 
  57. } 
  58.  
  59. function drawPigNose(ctx) { 
  60.     ctx.save(); 
  61.     ctx.fillStyle = '#fca7aa'; 
  62.     ctx.beginPath(); 
  63.     ctx.ellipse(0, 0, 150, 100, 0, 0, Math.PI * 2); 
  64.     ctx.closePath(); 
  65.     ctx.fill(); 
  66.     ctx.stroke(); 
  67.     ctx.save(); 
  68.     ctx.translate(-60, 0); 
  69.     drawPigNostrils(ctx); 
  70.     ctx.restore(); 
  71.     ctx.save(); 
  72.     ctx.translate(60, 0); 
  73.     drawPigNostrils(ctx); 
  74.     ctx.restore(); 
  75.     ctx.restore(); 
  76. } 
  77.  
  78. function drawPigNostrils(ctx) { 
  79.     ctx.save(); 
  80.     ctx.fillStyle = '#b55151'; 
  81.     ctx.beginPath(); 
  82.     ctx.ellipse(0, 0, 40, 60, 0, 0, Math.PI * 2); 
  83.     ctx.closePath(); 
  84.     ctx.fill(); 
  85.     ctx.stroke(); 
  86.     ctx.restore(); 
  87. } 
  88.  
  89. main(); 

本文轉(zhuǎn)載自微信公眾號(hào)「執(zhí)鳶者」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系執(zhí)鳶者公眾號(hào)。

 

責(zé)任編輯：武曉燕 來(lái)源： 前端點(diǎn)線(xiàn)面
Canvas標(biāo)簽
相關(guān)推薦

2021-02-21 22:53:01

CanvasHTML5JavaScript

2023-08-14 07:10:38

Docker部署項(xiàng)目

2017-06-26 09:15:39

SQL數(shù)據(jù)庫(kù)基礎(chǔ)

2022-11-01 12:16:47

Nginx微服務(wù)編譯

2012-02-29 00:49:06

Linux學(xué)習(xí)

2025-02-24 10:07:10

2013-06-06 13:42:48

OSPF入門(mén)配置

2010-02-06 15:31:18

ibmdwAndroid

2009-07-22 14:55:16

ibmdwAndroid

2019-07-02 14:17:18

API網(wǎng)關(guān)網(wǎng)關(guān)流量

2017-05-09 08:48:44

機(jī)器學(xué)習(xí)

2016-12-08 22:39:40

Android

2022-06-10 08:17:52

HashMap鏈表紅黑樹(shù)

2022-10-20 08:02:29

ELFRTOSSymbol

2021-12-12 18:15:06

Python并發(fā)編程

2010-11-08 10:20:18

2021-11-29 14:18:05

Nuxt3靜態(tài)Nuxt2

2024-02-26 08:52:20

Python傳遞函數(shù)參數(shù)參數(shù)傳遞類(lèi)型

2022-09-02 15:11:18

開(kāi)發(fā)工具

2017-01-03 16:57:58

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)