本文主要記錄Canvas基礎知識匯總。

1、Canvas定義

<canvas> 元素是HTML5中的新元素，通過它可以在網頁中繪制出所需的圖形。<canvas>標簽只是圖形的容器，真正繪制圖形需要使用腳本來完成。通過使用Canvas可以繪制路徑,圖形、字符以及添加圖像。可以做出非常炫酷的各種特效效果。
兼容性：ie9+

2、Canvas基本使用

2.1 創建畫布和對象

<canvas id="myCanvas" width="300" height="200"></canvas>

默認情況下，canvas沒有邊框，沒有內容，默認是300150的畫布。如果要重新設置寬高，可以直接在標簽上制定寬高屬性。也可以在js中制定。不可以使用CSS屬性來設置，因為canvas是一個畫布（可以理解是一張圖片），通過CSS設置屬性的寬高會使canvas中的內容按300150時的比例放大或縮小。

var canvas = document.getElementById('myCanvas');//創建 context 對象var ctx = canvas.getContext('2d');

Canvas 元素本身是沒有繪圖能力的，所有的繪制工作必須在 JavaScript 內部完成。getContext(“2d”) 對象是內建的 HTML5 對象，是獲取canvas上下文的環境。它擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。所有的繪制都是使用其接口方法實現的。

2.2 繪制線條

• moveTo(x,y) ：把路徑移動到畫布中的指定點
• lineTo(x,y)：添加一個新點
• stroke()：繪制線條，默認是黑色，如果需要指定樣式，需要在繪制前指定。
• lineWidth：指定線條的寬度
• strokeStyle：指定線條的顏色
• setLineDash([])：指定線條的虛線間隔

// 畫線條 ctx.moveTo(150, 50);ctx.lineTo(100, 100);ctx.lineTo(200, 100);ctx.lineTo(150, 50);ctx.lineWidth = 3;ctx.strokeStyle = "red";ctx.setLineDash([3]);ctx.stroke();

2.3 填充顏色

• fillStyle：指定填充的顏色
• fill()：顏色填充

// 顏色填充ctx.fillStyle = "blue";ctx.fill();

2.4 繪制多圖像

• beginPath()：通過清空子路徑列表開始一個新路徑
• closePath()：將筆點返回到當前子路徑起始點的方法

//繪制綠色的線條ctx.beginPath();ctx.moveTo(200, 100);ctx.lineTo(200, 200);ctx.lineTo(100, 200);ctx.lineTo(100, 100);ctx.setLineDash([0]);ctx.strokeStyle = "green";ctx.stroke();

canvas繪圖是一種基于路徑的繪圖，通過繪制路徑來繪制圖形，路徑是一系列點的集合。首先設置好路徑，再進行繪制。當我們在繪制第二個圖形時，第一個圖形的路徑又重新執行了一次，并且以最后的顏色及線條樣式執行的。如果需要執行多顏色，則需要重新開始新路徑。

2.5 繪制矩形

• fillRect(x,y,width,height)：繪制實心矩形
• strokeRect(x,y,width,height)：繪制空心矩形
• clearRect(x,y,width,height)：清空矩形
  • x：起始點X坐標
  • y ：起始點Y坐標
  • width ：矩形寬
  • height ：矩形高
  // 繪制空心矩形ctx.beginPath();ctx.strokeStyle = "grey";ctx.strokeRect(130, 150, 40, 50);

2.6 繪制圓形

• arc(x,y,radius,startAngle,endAngle, anticlockwise)
  • x：圓心的x坐標
  • y：圓心的y坐標
  • startAngle：開始角度
  • endAngle：結束角度
  • anticlockwise：是否逆時針，true是，false順時針
  // 繪制紅色圓形ctx.beginPath();ctx.fillStyle = "red";ctx.arc(160, 180, 6, 0, 2 * Math.PI);ctx.fill();// 繪制白色圓形ctx.beginPath();ctx.fillStyle = "white";ctx.arc(160, 180, 2, 0, 2 * Math.PI);ctx.fill();

3、Canvas高級使用

3.1 線性漸變

• createLinearGradient(xStart,yStart,xEnd,yEnd)
  • xStart：漸變開始點x坐標
  • yStart：漸變開始點y坐標
  • xEnd：漸變結束點x坐標
  • yEnd:漸變結束點y坐標
  • addColorStop(offset,color)
    • offset:設定的顏色離漸變結束點的偏移量(0~1)
    • color:繪制時要使用的顏色

// 添加漸變var g1 = ctx.createLinearGradient(0, 0, 0, 300);//注意，這里不是ctxg1.addColorStop(0, '#E55D87');g1.addColorStop(1, '#5FC3E4');ctx.fillStyle = g1;ctx.fillRect(0, 0, 300, 300);

3.2 徑向漸變

• createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
  • xStart：發散開始圓心x坐標
  • yStart：發散開始圓心y坐標
  • radiusStart：發散開始圓的半徑
  • xEnd：發散結束圓心的x坐標
  • yEnd：發散結束圓心的y坐標
  • radiusEnd：發散結束圓的半徑

// 同心圓徑向漸變var g2 = ctx.createRadialGradient(100, 100, 20, 120, 120, 50);g2.addColorStop(0, 'rgba(255,255,255,.1)');g2.addColorStop(0.9, 'rgba(255,1,136,1)'); g2.addColorStop(1, 'rgba(255,1,136,0.5)');ctx.fillStyle = g2;ctx.arc(120, 120, 50, 0, 2 * Math.PI);ctx.fill();

3.3 添加陰影

• shadowOffsetX：陰影在x方向上的偏移量，默認為0
• shadowOffsetY：陰影在y方向上的偏移量，默認為0
• shadowColor：陰影的顏色，默認為#000000
• shadowBlur：陰影的模糊度，默認為0

// 陰影ctx.fillStyle = "#393550";ctx.fillRect(0, 0, 300, 300);ctx.strokeStyle = "#41339c";ctx.shadowColor = '#81f2f4';ctx.shadowBlur = 20;ctx.strokeRect(10, 10, 280, 280);

3.4 繪制圖像

• drawImage(img,x,y)：在畫布上定位圖像
• drawImage(img,x,y,width,height)：在畫布上定位圖像，并規定圖像的寬度和高度
• drawImage(img,sx,sy,swidth,sheight,x,y,width,height)：剪切圖像，并在畫布上定位被剪切的部分
  • img：規定要使用的圖像、畫布或視頻
  • sx：可選。開始剪切的圖片上的 x 坐標位置
  • sy：可選。開始剪切的圖片上的 y 坐標位置
  • swidth：可選。被剪切圖像的寬度
  • sheight：可選。被剪切圖像的高度
  • x：在畫布上放置圖像的 x 坐標位置
  • y：在畫布上放置圖像的 y 坐標位置
  • width：可選。要使用的圖像的寬度
  • height：可選。要使用的圖像的高度

3.5 圖形變形

• scale(x,y)：縮放
  • x ：x坐標軸按 x 比例縮放
  • y ：x坐標軸按 y 比例縮放
• translate(x,y)：平移
  • x ：坐標原點向x軸方向平移
  • y ：坐標原點向y軸方向平移
• rotate(angle)：縮放
  • angle ：坐標軸旋轉x角度（角度變化模型和畫圓的模型一樣）

var img = new Image();img.src = "./images/2.png";img.onload = function () {ctx.beginPath();ctx.scale(0.5, 0.5);ctx.translate(200, 150);ctx.rotate(30 * Math.PI / 180); ctx.drawImage(this, 10, 10, 280, 280)}

3.6 圖形組合

• globalCompositeOperation?：設置或返回如何將一個源（新的）圖像繪制到目標（已有）的圖像上
  

3.7 圖形平鋪

• createPattern(img,type)：在指定的方向內重復指定的元素。
  • img：圖片、視頻，或者其他 元素
  • type：repeat：默認。該模式在水平和垂直方向重復
  • repeat-x：該模式只在水平方向重復
  • repeat-y：該模式只在垂直方向重復
  • no-repeat：該模式只顯示一次（不重復）

// 獲取頁面上已有的圖片var img = document.getElementById('img');var g1 = ctx.createPattern(img, "repeat-x");ctx.fillStyle = g1;ctx.rect(0, 0, 275, 200);ctx.fill()

3.8 圖像剪切

• clip()從原始畫布中剪切任意形狀和尺寸,一旦剪切了某個區域，則所有之后的繪圖都會被限制在被剪切的區域內

ctx.arc(100, 100, 50, 0, 2 * Math.PI);ctx.fillStyle = "#00b195";ctx.fill();ctx.clip();ctx.fillStyle = "black";ctx.fillRect(100, 100, 50, 50);

在canvas中可以通過 save() 方法保存裁切區之前的狀態，完成裁切后再使用 restore() 方法進行狀態讀取。

ctx.arc(100, 100, 50, 0, 2 * Math.PI);ctx.fillStyle = "#00b195";ctx.fill();// 保存裁切前的狀態ctx.save();ctx.clip();ctx.fillStyle = "black";ctx.fillRect(100, 100, 50, 50);// 釋放裁切前的狀態ctx.restore();ctx.fillStyle = "pink";ctx.fillRect(50, 50, 50, 50);

3.9 繪制文字

• font：設置或返回文本字體屬性，如font-style，font-weight，font-size等
• textAlign：對齊方式設置，取值：start， end，left，right，center，默認值為start
• textBaseline：文本基線設置，取值：top，middle，alphabetic，ideographic，bottom，默認值：alphabetic
• fillText(text,x,y,[maxWidth])：繪制實心文字
• strokeText(text,x,y,[maxWidth])：繪制實心文字
  • text：顯示文本
  • x：文本開始的x坐標
  • y：文本開始的y坐標
    
  • maxWidth：可選，文本顯示的最大寬度

ctx.font = "40px 隸書";ctx.strokeStyle = "#00b195";ctx.strokeText('黑瑪魚', 250, 40);// 加了maxWidthctx.strokeText('黑瑪魚', 250, 100, 240);// 加了textAlignctx.textAlign = "right";ctx.fillStyle = "#409eff";ctx.fillText('黑瑪魚', 250, 150, 240);// 加了textBaselinectx.textAlign = "left";ctx.textBaseline = "middle";ctx.fillText('黑瑪魚', 250, 150, 240);

3.10 貝塞爾曲線

• quadraticCurveTo(x1, y1, ex, ey)?：二次貝塞爾曲線
  

• bezierCurveTo(x1, y1, x2, y2, ex, ey)?：三次貝塞爾曲線
  • x1： 第一個貝塞爾控制點的x坐標
  • y1： 第一個貝塞爾控制點的y坐標
  • x2： 第二個貝塞爾控制點的x坐標
  • y2： 第二個貝塞爾控制點的y坐標
  • ex： 結束點的x坐標
  • ey： 結束點的y坐標

轉載于:https://www.cnblogs.com/webhmy/p/9556121.html

總結

以上是生活随笔為你收集整理的Canvas知识点汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。