本文主要記錄Canvas基礎(chǔ)知識(shí)匯總。

1、Canvas定義

<canvas> 元素是HTML5中的新元素，通過(guò)它可以在網(wǎng)頁(yè)中繪制出所需的圖形。<canvas>標(biāo)簽只是圖形的容器，真正繪制圖形需要使用腳本來(lái)完成。通過(guò)使用Canvas可以繪制路徑,圖形、字符以及添加圖像?？梢宰龀龇浅ｌ趴岬母鞣N特效效果。
兼容性：ie9+

2、Canvas基本使用

2.1 創(chuàng)建畫(huà)布和對(duì)象

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

默認(rèn)情況下，canvas沒(méi)有邊框，沒(méi)有內(nèi)容，默認(rèn)是300150的畫(huà)布。如果要重新設(shè)置寬高，可以直接在標(biāo)簽上制定寬高屬性。也可以在js中制定。不可以使用CSS屬性來(lái)設(shè)置，因?yàn)閏anvas是一個(gè)畫(huà)布（可以理解是一張圖片），通過(guò)CSS設(shè)置屬性的寬高會(huì)使canvas中的內(nèi)容按300150時(shí)的比例放大或縮小。

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

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

2.2 繪制線條

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

// 畫(huà)線條 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()：通過(guò)清空子路徑列表開(kāi)始一個(gè)新路徑
• closePath()：將筆點(diǎn)返回到當(dāng)前子路徑起始點(diǎn)的方法

//繪制綠色的線條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繪圖是一種基于路徑的繪圖，通過(guò)繪制路徑來(lái)繪制圖形，路徑是一系列點(diǎn)的集合。首先設(shè)置好路徑，再進(jìn)行繪制。當(dāng)我們?cè)诶L制第二個(gè)圖形時(shí)，第一個(gè)圖形的路徑又重新執(zhí)行了一次，并且以最后的顏色及線條樣式執(zhí)行的。如果需要執(zhí)行多顏色，則需要重新開(kāi)始新路徑。

2.5 繪制矩形

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

2.6 繪制圓形

• arc(x,y,radius,startAngle,endAngle, anticlockwise)
  • x：圓心的x坐標(biāo)
  • y：圓心的y坐標(biāo)
  • startAngle：開(kāi)始角度
  • endAngle：結(jié)束角度
  • anticlockwise：是否逆時(shí)針，true是，false順時(shí)針
  // 繪制紅色圓形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高級(jí)使用

3.1 線性漸變

• createLinearGradient(xStart,yStart,xEnd,yEnd)
  • xStart：漸變開(kāi)始點(diǎn)x坐標(biāo)
  • yStart：漸變開(kāi)始點(diǎn)y坐標(biāo)
  • xEnd：漸變結(jié)束點(diǎn)x坐標(biāo)
  • yEnd:漸變結(jié)束點(diǎn)y坐標(biāo)
  • addColorStop(offset,color)
    • offset:設(shè)定的顏色離漸變結(jié)束點(diǎn)的偏移量(0~1)
    • color:繪制時(shí)要使用的顏色

// 添加漸變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：發(fā)散開(kāi)始圓心x坐標(biāo)
  • yStart：發(fā)散開(kāi)始圓心y坐標(biāo)
  • radiusStart：發(fā)散開(kāi)始圓的半徑
  • xEnd：發(fā)散結(jié)束圓心的x坐標(biāo)
  • yEnd：發(fā)散結(jié)束圓心的y坐標(biāo)
  • radiusEnd：發(fā)散結(jié)束圓的半徑

// 同心圓徑向漸變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方向上的偏移量，默認(rèn)為0
• shadowOffsetY：陰影在y方向上的偏移量，默認(rèn)為0
• shadowColor：陰影的顏色，默認(rèn)為#000000
• shadowBlur：陰影的模糊度，默認(rèn)為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)：在畫(huà)布上定位圖像
• drawImage(img,x,y,width,height)：在畫(huà)布上定位圖像，并規(guī)定圖像的寬度和高度
• drawImage(img,sx,sy,swidth,sheight,x,y,width,height)：剪切圖像，并在畫(huà)布上定位被剪切的部分
  • img：規(guī)定要使用的圖像、畫(huà)布或視頻
  • sx：可選。開(kāi)始剪切的圖片上的 x 坐標(biāo)位置
  • sy：可選。開(kāi)始剪切的圖片上的 y 坐標(biāo)位置
  • swidth：可選。被剪切圖像的寬度
  • sheight：可選。被剪切圖像的高度
  • x：在畫(huà)布上放置圖像的 x 坐標(biāo)位置
  • y：在畫(huà)布上放置圖像的 y 坐標(biāo)位置
  • width：可選。要使用的圖像的寬度
  • height：可選。要使用的圖像的高度

3.5 圖形變形

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

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?：設(shè)置或返回如何將一個(gè)源（新的）圖像繪制到目標(biāo)（已有）的圖像上
  

3.7 圖形平鋪

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

// 獲取頁(yè)面上已有的圖片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()從原始畫(huà)布中剪切任意形狀和尺寸,一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)

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中可以通過(guò) save() 方法保存裁切區(qū)之前的狀態(tài)，完成裁切后再使用 restore() 方法進(jìn)行狀態(tài)讀取。

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

3.9 繪制文字

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

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

3.10 貝塞爾曲線

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

• bezierCurveTo(x1, y1, x2, y2, ex, ey)?：三次貝塞爾曲線
  • x1： 第一個(gè)貝塞爾控制點(diǎn)的x坐標(biāo)
  • y1： 第一個(gè)貝塞爾控制點(diǎn)的y坐標(biāo)
  • x2： 第二個(gè)貝塞爾控制點(diǎn)的x坐標(biāo)
  • y2： 第二個(gè)貝塞爾控制點(diǎn)的y坐標(biāo)
  • ex： 結(jié)束點(diǎn)的x坐標(biāo)
  • ey： 結(jié)束點(diǎn)的y坐標(biāo)

轉(zhuǎn)載于:https://www.cnblogs.com/webhmy/p/9556121.html

總結(jié)

以上是生活随笔為你收集整理的Canvas知识点汇总的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。