學習HTML5 Canvas這一篇文章就夠了

Eidesen 發布于2019-08-26 12:12 / 870人閱讀

摘要：本文作者利用一些簡單的對進行了系統的總結，受益匪淺，毫不夸張的說，學習這一篇文章就夠了一簡介是新增的，一個可以使用腳本通常為在其中繪制圖像的元素。

本文作者利用一些簡單的 demo 對 Canvas 進行了系統的總結，受益匪淺，毫不夸張的說，學習 Canvas 這一篇文章就夠了！

一、canvas簡介

? 是 HTML5 新增的，一個可以使用腳本(通常為JavaScript)在其中繪制圖像的 HTML 元素。它可以用來制作照片集或者制作簡單(也不是那么簡單)的動畫，甚至可以進行實時視頻處理和渲染。

? 它最初由蘋果內部使用自己MacOS X WebKit推出，供應用程序使用像儀表盤的構件和 Safari 瀏覽器使用。后來，有人通過Gecko內核的瀏覽器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本網絡應用技術工作組建議為下一代的網絡技術使用該元素。

? Canvas是由HTML代碼配合高度和寬度屬性而定義出的可繪制區域。JavaScript代碼可以訪問該區域，類似于其他通用的二維API，通過一套完整的繪圖函數來動態生成圖形。

? Mozilla 程序從 Gecko 1.8 (Firefox 1.5)開始支持 , Internet Explorer 從IE9開始。Chrome和Opera 9+ 也支持。

二、Canvas基本使用 2.1 元素

? 看起來和標簽一樣，只是只有兩個可選的屬性 width、heigth 屬性，而沒有 src、alt 屬性。

? 如果不給設置widht、height屬性時，則默認 width為300、height為150,單位都是px。也可以使用css屬性來設置寬高，但是如寬高屬性和初始比例不一致，他會出現扭曲。所以，建議永遠不要使用css屬性來設置的寬高。

替換內容

? 由于某些較老的瀏覽器（尤其是IE9之前的IE瀏覽器）或者瀏覽器不支持HTML元素，在這些瀏覽器上你應該總是能展示替代內容。

? 支持的瀏覽器會只渲染標簽，而忽略其中的替代內容。不支持的瀏覽器則會直接渲染替代內容。

用文本替換：

用  替換：

結束標簽不可省

與元素不同，元素需要結束標簽()。如果結束標簽不存在，則文檔的其余部分會被認為是替代內容，將不會顯示出來。

2.2 渲染上下文(Thre Rending Context)

? 會創建一個固定大小的畫布，會公開一個或多個 渲染上下文(畫筆)，使用 渲染上下文來繪制和處理要展示的內容。

? 我們重點研究 2D渲染上下文。其他的上下文我們暫不研究，比如， WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。

var canvas = document.getElementById("tutorial");
//獲得 2d 上下文對象
var ctx = canvas.getContext("2d");

2.3 檢測支持性

var canvas = document.getElementById("tutorial");

if (canvas.getContext){
  var ctx = canvas.getContext("2d");
  // drawing code here
} else {
  // canvas-unsupported code here
}

2.4 代碼模板



    Canvas tutorial

2.5 一個簡單的例子

繪制兩個長方形。



    Canvas tutorial

三、繪制形狀 3.1 柵格(grid)和坐標空間

? 如下圖所示，canvas元素默認被網格所覆蓋。通常來說網格中的一個單元相當于canvas元素中的一像素。柵格的起點為左上角（坐標為（0,0））。所有元素的位置都相對于原點來定位。所以圖中藍色方形左上角的坐標為距離左邊（X軸）x像素，距離上邊（Y軸）y像素（坐標為（x,y））。

? 后面我們會涉及到坐標原點的平移、網格的旋轉以及縮放等。

3.2 繪制矩形

? 只支持一種原生的圖形繪制：矩形。所有其他圖形都至少需要生成一種路徑(path)。不過，我們擁有眾多路徑生成的方法讓復雜圖形的繪制成為了可能。

canvast 提供了三種方法繪制矩形：

fillRect(x, y, width, height)

繪制一個填充的矩形

strockRect(x, y, width, height)

繪制一個矩形的邊框

clearRect(x, y, widh, height)

清除指定的矩形區域，然后這塊區域會變的完全透明。

說明：

? 這3個方法具有相同的參數。

? x, y：指的是矩形的左上角的坐標。(相對于canvas的坐標原點)

? width, height：指的是繪制的矩形的寬和高。

function draw(){
    var canvas = document.getElementById("tutorial");
    if(!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.fillRect(10, 10, 100, 50);  //繪制矩形,填充的默認顏色為黑色
    ctx.strokeRect(10, 70, 100, 50);  //繪制矩形邊框

}
draw();

ctx.clearRect(15, 15, 50, 25);

四、繪制路徑(path)

? 圖形的基本元素是路徑。

? 路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合。

? 一個路徑，甚至一個子路徑，都是閉合的。

使用路徑繪制圖形需要一些額外的步驟：

創建路徑起始點

調用繪制方法去繪制出路徑

把路徑封閉

一旦路徑生成，通過描邊或填充路徑區域來渲染圖形。

下面是需要用到的方法：

beginPath()

新建一條路徑，路徑一旦創建成功，圖形繪制命令被指向到路徑上生成路徑

moveTo(x, y)

把畫筆移動到指定的坐標(x, y)。相當于設置路徑的起始點坐標。

closePath()

閉合路徑之后，圖形繪制命令又重新指向到上下文中

stroke()

通過線條來繪制圖形輪廓

fill()

通過填充路徑的內容區域生成實心的圖形

4.1 繪制線段

function draw(){
    var canvas = document.getElementById("tutorial");
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.beginPath(); //新建一條path
    ctx.moveTo(50, 50); //把畫筆移動到指定的坐標
    ctx.lineTo(200, 50);  //繪制一條從當前位置到指定坐標(200, 50)的直線.
    //閉合路徑。會拉一條從當前點到path起始點的直線。如果當前點與起始點重合，則什么都不做
    ctx.closePath();
    ctx.stroke(); //繪制路徑。
}
draw();

4.2 繪制三角形邊框

function draw(){
    var canvas = document.getElementById("tutorial");
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(200, 50);
    ctx.lineTo(200, 200);
    ctx.closePath(); //雖然我們只繪制了兩條線段，但是closePath會closePath，仍然是一個3角形
    ctx.stroke(); //描邊。stroke不會自動closePath()
}
draw();

4.3 填充三角形

function draw(){
    var canvas = document.getElementById("tutorial");
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(200, 50);
    ctx.lineTo(200, 200);

    ctx.fill(); //填充閉合區域。如果path沒有閉合，則fill()會自動閉合路徑。
}
draw();

4.4 繪制圓弧

有兩個方法可以繪制圓弧：

arc(x, y, r, startAngle, endAngle, anticlockwise):

以(x, y)為圓心，以r為半徑，從 startAngle弧度開始到endAngle弧度結束。anticlosewise是布爾值，true表示逆時針，false表示順時針。(默認是順時針)

注意：

這里的度數都是弧度。

0弧度是指的x軸正方形

radians=(Math.PI/180)*degrees //角度轉換成弧度

arcTo(x1, y1, x2, y2, radius):

根據給定的控制點和半徑畫一段圓弧，最后再以直線連接兩個控制點。

圓弧案例1：

function draw(){
    var canvas = document.getElementById("tutorial");
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
    ctx.stroke();
}
draw();

圓弧案例2：

function draw(){
    var canvas = document.getElementById("tutorial");
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(150, 50, 40, 0, -Math.PI / 2, true);
    ctx.closePath();
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(150, 150, 40, 0, Math.PI, false);
    ctx.fill();

}
draw();

圓弧案例3：

function draw(){
    var canvas = document.getElementById("tutorial");
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(50, 50);
    //參數1、2：控制點1坐標   參數3、4：控制點2坐標  參數4：圓弧半徑
    ctx.arcTo(200, 50, 200, 200, 100);
    ctx.lineTo(200, 200)
    ctx.stroke();

    ctx.beginPath();
    ctx.rect(50, 50, 10, 10);
    ctx.rect(200, 50, 10, 10)
    ctx.rect(200, 200, 10, 10)
    ctx.fill()
}
draw();

arcTo方法的說明：

? 這個方法可以這樣理解。繪制的弧形是由兩條切線所決定。

? 第 1 條切線：起始點和控制點1決定的直線。

? 第 2 條切線：控制點1 和控制點2決定的直線。

? 其實繪制的圓弧就是與這兩條直線相切的圓弧。

4.5 繪制貝塞爾曲線 4.5.1 什么是貝塞爾曲線

? 貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟埃曲線，是應用于二維圖形應用程序的數學曲線。

? 一般的矢量圖形軟件通過它來精確畫出曲線，貝茲曲線由線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋，我們在繪圖工具上看到的鋼筆工具就是來做這種矢量曲線的。

? 貝塞爾曲線是計算機圖形學中相當重要的參數曲線，在一些比較成熟的位圖軟件中也有貝塞爾曲線工具如PhotoShop等。在Flash4中還沒有完整的曲線工具，而在Flash5里面已經提供出貝塞爾曲線工具。

? 貝塞爾曲線于1962，由法國工程師皮埃爾·貝塞爾（Pierre Bézier）所廣泛發表，他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線最初由Paul de Casteljau于1959年運用de Casteljau演算法開發，以穩定數值的方法求出貝茲曲線。

一次貝塞爾曲線(線性貝塞爾曲線)

? 一次貝塞爾曲線其實是一條直線。

二次貝塞爾曲線

三次貝塞爾曲線

4.5.2 繪制貝塞爾曲線 繪制二次貝塞爾曲線

quadraticCurveTo(cp1x, cp1y, x, y):

說明：

? 參數1和2：控制點坐標

? 參數3和4：結束點坐標

function draw(){
    var canvas = document.getElementById("tutorial");
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(10, 200); //起始點
    var cp1x = 40, cp1y = 100;  //控制點
    var x = 200, y = 200; // 結束點
    //繪制二次貝塞爾曲線
    ctx.quadraticCurveTo(cp1x, cp1y, x, y);
    ctx.stroke();

    ctx.beginPath();
    ctx.rect(10, 200, 10, 10);
    ctx.rect(cp1x, cp1y, 10, 10);
    ctx.rect(x, y, 10, 10);
    ctx.fill();

}
draw();

繪制三次貝塞爾曲線

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：

說明：

? 參數1和2：控制點1的坐標

? 參數3和4：控制點2的坐標

? 參數5和6：結束點的坐標

function draw(){
    var canvas = document.getElementById("tutorial");
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(40, 200); //起始點
    var cp1x = 20, cp1y = 100;  //控制點1
    var cp2x = 100, cp2y = 120;  //控制點2
    var x = 200, y = 200; // 結束點
    //繪制二次貝塞爾曲線
    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
    ctx.stroke();

    ctx.beginPath();
    ctx.rect(40, 200, 10, 10);
    ctx.rect(cp1x, cp1y, 10, 10);
    ctx.rect(cp2x, cp2y, 10, 10);
    ctx.rect(x, y, 10, 10);
    ctx.fill();

}
draw();

五、添加樣式和顏色

? 在前面的繪制矩形章節中，只用到了默認的線條和顏色。

? 如果想要給圖形上色，有兩個重要的屬性可以做到。

fillStyle = color

設置圖形的填充顏色

strokeStyle = color

設置圖形輪廓的顏色

備注：

1. `color` 可以是表示 `css` 顏色值的字符串、漸變對象或者圖案對象。
2. 默認情況下，線條和填充顏色都是黑色。
3. 一旦您設置了 `strokeStyle` 或者 `fillStyle` 的值，那么這個新值就會成為新繪制的圖形的默認值。如果你要給每個圖形上不同的顏色，你需要重新設置 `fillStyle` 或 `strokeStyle` 的值。

fillStyle

function draw(){
  var canvas = document.getElementById("tutorial");
  if (!canvas.getContext) return;
  var ctx = canvas.getContext("2d");
  for (var i = 0; i < 6; i++){
    for (var j = 0; j < 6; j++){
      ctx.fillStyle = "rgb(" + Math.floor(255 - 42.5 * i) + "," +
        Math.floor(255 - 42.5 * j) + ",0)";
      ctx.fillRect(j * 50, i * 50, 50, 50);
    }
  }
}
draw();

strokeStyle

Transparency(透明度)

globalAlpha = transparencyValue

? 這個屬性影響到 canvas 里所有圖形的透明度，有效的值范圍是 0.0 （完全透明）到 1.0（完全不透明），默認是 1.0。

? globalAlpha 屬性在需要繪制大量擁有相同透明度的圖形時候相當高效。不過，我認為使用rgba()設置透明度更加好一些。

line style 1. lineWidth = value

線寬。只能是正值。默認是1.0。

起始點和終點的連線為中心，上下各占線寬的一半

ctx.beginPath();  
ctx.moveTo(10, 10);  
ctx.lineTo(100, 10);  
ctx.lineWidth = 10;  
ctx.stroke();

ctx.beginPath();  
ctx.moveTo(110, 10);  
ctx.lineTo(160, 10)  
ctx.lineWidth = 20;  
ctx.stroke()

2. lineCap = type

線條末端樣式。

共有3個值：

butt：線段末端以方形結束

round：線段末端以圓形結束

square：線段末端以方形結束，但是增加了一個寬度和線段相同，高度是線段厚度一半的矩形區域。

var lineCaps = ["butt", "round", "square"];

for (var i = 0; i < 3; i++){
   ctx.beginPath();
   ctx.moveTo(20 + 30 * i, 30);
   ctx.lineTo(20 + 30 * i, 100);
   ctx.lineWidth = 20;
   ctx.lineCap = lineCaps[i];
   ctx.stroke();
}

ctx.beginPath();
ctx.moveTo(0, 30);
ctx.lineTo(300, 30);

ctx.moveTo(0, 100);
ctx.lineTo(300, 100)

ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.stroke();

3. lineJoin = type

同一個path內，設定線條與線條間接合處的樣式。

共有3個值round, bevel 和 miter：

round

通過填充一個額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。圓角的半徑是線段的寬度。

bevel

在相連部分的末端填充一個額外的以三角形為底的區域，每個部分都有各自獨立的矩形拐角。

miter(默認)

通過延伸相連部分的外邊緣，使其相交于一點，形成一個額外的菱形區域。

function draw(){

var canvas = document.getElementById("tutorial");
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");

var lineJoin = ["round", "bevel", "miter"];
ctx.lineWidth = 20;

for (var i = 0; i < lineJoin.length; i++){
    ctx.lineJoin = lineJoin[i];
    ctx.beginPath();
    ctx.moveTo(50, 50 + i * 50);
    ctx.lineTo(100, 100 + i * 50);
    ctx.lineTo(150, 50 + i * 50);
    ctx.lineTo(200, 100 + i * 50);
    ctx.lineTo(250, 50 + i * 50);
    ctx.stroke();
}

}
draw();

4. 虛線

用 setLineDash 方法和 lineDashOffset 屬性來制定虛線樣式. setLineDash 方法接受一個數組，來指定線段與間隙的交替；lineDashOffset屬性設置起始偏移量.

function draw(){
    var canvas = document.getElementById("tutorial");
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");

    ctx.setLineDash([20, 5]);  // [實線長度, 間隙長度]
    ctx.lineDashOffset = -0;
    ctx.strokeRect(50, 50, 210, 210);
}
draw();

備注：

? getLineDash():返回一個包含當前虛線樣式，長度為非負偶數的數組。

六、繪制文本 繪制文本的兩個方法

canvas 提供了兩種方法來渲染文本:

fillText(text, x, y [, maxWidth])

在指定的(x,y)位置填充指定的文本，繪制的最大寬度是可選的.

strokeText(text, x, y [, maxWidth])

在指定的(x,y)位置繪制文本邊框，繪制的最大寬度是可選的.

var ctx;
function draw(){

var canvas = document.getElementById("tutorial");
if (!canvas.getContext) return;
ctx = canvas.getContext("2d");
ctx.font = "100px sans-serif"
ctx.fillText("天若有情", 10, 100);
ctx.strokeText("天若有情", 10, 200)

}
draw();

給文本添加樣式

font = value

當前我們用來繪制文本的樣式。這個字符串使用和 CSS font屬性相同的語法. 默認的字體是 10px sans-serif。

textAlign = value

文本對齊選項. 可選的值包括：start, end, left, right or center. 默認值是 start。

textBaseline = value

基線對齊選項，可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默認值是 alphabetic。

direction = value

文本方向?？赡艿闹蛋ǎ?b>ltr, rtl, inherit。默認值是 inherit。

七、繪制圖片

? 我們也可以在canvas上直接繪制圖片。

7.1 由零開始創建圖片 創建元素

var img = new Image();   // 創建一個元素
img.src = "myImage.png"; // 設置圖片源地址

腳本執行后圖片開始裝載

繪制img

//參數1：要繪制的img  參數2、3：繪制的img在canvas中的坐標
ctx.drawImage(img,0,0);

注意：

? 考慮到圖片是從網絡加載，如果 drawImage 的時候圖片還沒有完全加載完成，則什么都不做，個別瀏覽器會拋異常。所以我們應該保證在 img 繪制完成之后再 drawImage。

var img = new Image();   // 創建img元素
img.onload = function(){
  ctx.drawImage(img, 0, 0)
}
img.src = "myImage.png"; // 設置圖片源地址

7.2 繪制 img 標簽元素中的圖片

? img 可以 new 也可以來源于我們頁面的標簽

第一張圖片就是頁面中的標簽

7.3 縮放圖片

drawImage() 也可以再添加兩個參數：

? drawImage(image, x, y, width, height)

? 這個方法多了2個參數：width 和 height，這兩個參數用來控制當像canvas畫入時應該縮放的大小。

ctx.drawImage(img, 0, 0, 400, 200)

7.4 切片(slice)

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

? 第一個參數和其它的是相同的，都是一個圖像或者另一個 canvas 的引用。

其他8個參數：

? 前4個是定義圖像源的切片位置和大小，

? 后4個則是定義切片的目標顯示位置和大小。

八、狀態的保存和恢復

Saving and restoring state是繪制復雜圖形時必不可少的操作。

save()和restore()

? save 和 restore 方法是用來保存和恢復 canvas 狀態的，都沒有參數。

? Canvas 的狀態就是當前畫面應用的所有樣式和變形的一個快照。

關于 save()

Canvas狀態存儲在棧中，每當save()方法被調用后，當前的狀態就被推送到棧中保存。一個繪畫狀態包括：

當前應用的變形（即移動，旋轉和縮放）

strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值

當前的裁切路徑（clipping path）

?

**可以調用任意多次 `save`方法。**(類似數組的`push()`)

關于restore()

每一次調用 restore 方法，上一個保存的狀態就從棧中彈出，所有設定都恢復。(類似數組的pop())

var ctx;
function draw(){

var canvas = document.getElementById("tutorial");
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");

ctx.fillRect(0, 0, 150, 150);   // 使用默認設置繪制一個矩形
ctx.save();                  // 保存默認狀態

ctx.fillStyle = "red"       // 在原有配置基礎上對顏色做改變
ctx.fillRect(15, 15, 120, 120); // 使用新的設置繪制一個矩形

ctx.save();                  // 保存當前狀態
ctx.fillStyle = "#FFF"       // 再次改變顏色配置
ctx.fillRect(30, 30, 90, 90);   // 使用新的配置繪制一個矩形

ctx.restore();               // 重新加載之前的顏色狀態
ctx.fillRect(45, 45, 60, 60);   // 使用上一次的配置繪制一個矩形

ctx.restore();               // 加載默認顏色配置
ctx.fillRect(60, 60, 30, 30);   // 使用加載的配置繪制一個矩形

}
draw();

九、變形 9.1 translate

translate(x, y)

? 用來移動 canvas 的原點到指定的位置

? translate方法接受兩個參數。x 是左右偏移量，y 是上下偏移量，如右圖所示。

在做變形之前先保存狀態是一個良好的習慣。大多數情況下，調用 restore 方法比手動恢復原先的狀態要簡單得多。又如果你是在一個循環中做位移但沒有保存和恢復canvas 的狀態，很可能到最后會發現怎么有些東西不見了，那是因為它很可能已經超出 canvas 范圍以外了。

? 注意：translate移動的是canvas的坐標原點。(坐標變換)

var ctx;
function draw(){
    var canvas = document.getElementById("tutorial1");
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.save(); //保存坐原點平移之前的狀態
    ctx.translate(100, 100);
    ctx.strokeRect(0, 0, 100, 100)
    ctx.restore(); //恢復到最初狀態
    ctx.translate(220, 220);
    ctx.fillRect(0, 0, 100, 100)
}
draw();

9.2 rotate

rotate(angle)

? 旋轉坐標軸。

? 這個方法只接受一個參數：旋轉的角度(angle)，它是順時針方向的，以弧度為單位的值。

? 旋轉的中心是坐標原點。

var ctx;
function draw(){
  var canvas = document.getElementById("tutorial1");
  if (!canvas.getContext) return;
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = "red";
  ctx.save();

  ctx.translate(100, 100);
  ctx.rotate(Math.PI / 180 * 45);
  ctx.fillStyle = "blue";
  ctx.fillRect(0, 0, 100, 100);
  ctx.restore();

  ctx.save();
  ctx.translate(0, 0);
  ctx.fillRect(0, 0, 50, 50)
  ctx.restore();
}
draw();

9.3 scale

scale(x, y)

? 我們用它來增減圖形在 canvas 中的像素數目，對形狀，位圖進行縮小或者放大。

? scale方法接受兩個參數。x,y分別是橫軸和縱軸的縮放因子，它們都必須是正值。值比 1.0 小表示縮小，比 1.0 大則表示放大，值為 1.0 時什么效果都沒有。

? 默認情況下，canvas 的 1 單位就是 1 個像素。舉例說，如果我們設置縮放因子是 0.5，1 個單位就變成對應 0.5 個像素，這樣繪制出來的形狀就會是原先的一半。同理，設置為 2.0 時，1 個單位就對應變成了 2 像素，繪制的結果就是圖形放大了 2 倍。

9.4 transform(變形矩陣)

transform(a, b, c, d, e, f)

a (m11)

? Horizontal scaling.

b (m12)

? Horizontal skewing.

c (m21)

? Vertical skewing.

d (m22)

? Vertical scaling.

e (dx)

? Horizontal moving.

f (dy)

? Vertical moving.

var ctx;
function draw(){
    var canvas = document.getElementById("tutorial1");
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.transform(1, 1, 0, 1, 0, 0);
    ctx.fillRect(0, 0, 100, 100);
}
draw();

十、合成

? 在前面的所有例子中、，我們總是將一個圖形畫在另一個之上，對于其他更多的情況，僅僅這樣是遠遠不夠的。比如，對合成的圖形來說，繪制順序會有限制。不過，我們可以利用 globalCompositeOperation 屬性來改變這種狀況。

globalCompositeOperation = type

    var ctx;
    function draw(){
        var canvas = document.getElementById("tutorial1");
        if (!canvas.getContext) return;
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "blue";
        ctx.fillRect(0, 0, 200, 200);

        ctx.globalCompositeOperation = "source-over"; //全局合成操作
        ctx.fillStyle = "red";
        ctx.fillRect(100, 100, 200, 200);
    }
    draw();

注：下面的展示中，藍色是原有的，紅色是新的。

type `是下面 13 種字符串值之一：

1. source-over(default)

這是默認設置，新圖像會覆蓋在原有圖像。

2. source-in

僅僅會出現新圖像與原來圖像重疊的部分，其他區域都變成透明的。(包括其他的老圖像區域也會透明)

3. source-out

僅僅顯示新圖像與老圖像沒有重疊的部分，其余部分全部透明。(老圖像也不顯示)

4. source-atop

新圖像僅僅顯示與老圖像重疊區域。老圖像仍然可以顯示。

5. destination-over

新圖像會在老圖像的下面。

6. destination-in

僅僅新老圖像重疊部分的老圖像被顯示，其他區域全部透明。

7. destination-out

僅僅老圖像與新圖像沒有重疊的部分。注意顯示的是老圖像的部分區域。

8. destination-atop

老圖像僅僅僅僅顯示重疊部分，新圖像會顯示在老圖像的下面。

9. lighter

新老圖像都顯示，但是重疊區域的顏色做加處理

10. darken

保留重疊部分最黑的像素。(每個顏色位進行比較，得到最小的)

blue: #0000ff

red: #ff0000

所以重疊部分的顏色：#000000

11. lighten

保證重疊部分最量的像素。(每個顏色位進行比較，得到最大的)

blue: #0000ff

red: #ff0000

所以重疊部分的顏色：#ff00ff

12. xor

重疊部分會變成透明

13. copy

只有新圖像會被保留，其余的全部被清除(邊透明)

十一、裁剪路徑

clip()

? 把已經創建的路徑轉換成裁剪路徑。

? 裁剪路徑的作用是遮罩。只顯示裁剪路徑內的區域，裁剪路徑外的區域會被隱藏。

? 注意：clip()只能遮罩在這個方法調用之后繪制的圖像，如果是clip()方法調用之前繪制的圖像，則無法實現遮罩。

var ctx;
function draw(){
    var canvas = document.getElementById("tutorial1");
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.arc(20,20, 100, 0, Math.PI * 2);
    ctx.clip();

    ctx.fillStyle = "pink";
    ctx.fillRect(20, 20, 100,100);
}
draw();

十二、動畫 動畫的基本步驟

清空canvas

再繪制每一幀動畫之前，需要清空所有。清空所有最簡單的做法就是clearRect()方法

保存canvas狀態

如果在繪制的過程中會更改canvas的狀態(顏色、移動了坐標原點等),又在繪制每一幀時都是原始狀態的話，則最好保存下canvas的狀態

繪制動畫圖形

這一步才是真正的繪制動畫幀

恢復canvas狀態

如果你前面保存了canvas狀態，則應該在繪制完成一幀之后恢復canvas狀態。

控制動畫

我們可用通過canvas的方法或者自定義的方法把圖像會知道到canvas上。正常情況，我們能看到繪制的結果是在腳本執行結束之后。例如，我們不可能在一個 for 循環內部完成動畫。

也就是，為了執行動畫，我們需要一些可以定時執行重繪的方法。

一般用到下面三個方法：

setInterval()

setTimeout()

requestAnimationFrame()

案例1：太陽系

let sun;
let earth;
let moon;
let ctx;
function init(){
    sun = new Image();
    earth = new Image();
    moon = new Image();
    sun.src = "sun.png";
    earth.src = "earth.png";
    moon.src = "moon.png";

    let canvas = document.querySelector("#solar");
    ctx = canvas.getContext("2d");

    sun.onload = function (){
        draw()
    }

}
init();
function draw(){
    ctx.clearRect(0, 0, 300, 300); //清空所有的內容
    /*繪制 太陽*/
    ctx.drawImage(sun, 0, 0, 300, 300);

    ctx.save();
    ctx.translate(150, 150);

    //繪制earth軌道
    ctx.beginPath();
    ctx.strokeStyle = "rgba(255,255,0,0.5)";
    ctx.arc(0, 0, 100, 0, 2 * Math.PI)
    ctx.stroke()

    let time = new Date();
    //繪制地球
    ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds())
    ctx.translate(100, 0);
    ctx.drawImage(earth, -12, -12)

    //繪制月球軌道
    ctx.beginPath();
    ctx.strokeStyle = "rgba(255,255,255,.3)";
    ctx.arc(0, 0, 40, 0, 2 * Math.PI);
    ctx.stroke();

    //繪制月球
    ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds());
    ctx.translate(40, 0);
    ctx.drawImage(moon, -3.5, -3.5);
    ctx.restore();

    requestAnimationFrame(draw);
}

案例2：模擬時鐘




    
    Title

GPU云服務器云服務器深度學習看這一篇 HTML5 Canvas html5的canvas html5Canvas

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108239.html

Scrapy詳解爬蟲框架入門看這一篇就夠了！

摘要：目錄前言架構安裝第一個爬蟲爬取有道翻譯創建項目創建創建解析運行爬蟲爬取單詞釋義下載單詞語音文件前言學習有一段時間了，當時想要獲取一下百度漢字的解析，又不想一個個漢字去搜，復制粘貼太費勁，考慮到爬蟲的便利性，這篇文章是介紹一個爬蟲框架，目錄前言架構安裝第一個爬蟲：爬取有道翻譯創建項目創建Item 創建Spider 解析運行爬蟲-爬取單詞釋義下載單詞語音文件 ...

lordharrd 2019-07-31 11:29 評論0 收藏0
前端簡單面部識別

摘要：前言過年了，來點有趣的東西最近一直在嘗試通過如何視頻，怎么捕捉視頻的行為，給視頻加點好玩的東西比如給視頻加一個胡子以下記錄一下最近的玩具點擊這里看自己的效果需要允許攝像頭呀效果效果大概如下就是給視頻的臉上加個胡子我手機上有防藍光的膜，各位大前言過年了，來點有趣的東西最近一直在嘗試通過web如何DIY視頻，怎么捕捉視頻的行為，給視頻加點好玩的東西,比如給視頻加一個胡子？以下記錄一...

econi 2019-08-26 11:42 評論0 收藏0
WorkManager從入門到實踐，有這一篇就夠了

摘要：前言上一次我們對的應用進行了一次全面的分析，這一次我們來聊聊。 showImg(https://segmentfault.com/img/remote/1460000020077803?w=1280&h=853); 前言上一次我們對Paging的應用進行了一次全面的分析，這一次我們來聊聊WorkManager。如果你對Paging還未了解，推薦閱讀這篇文章： Paging在Recy...

bingchen 2019-08-19 10:30 評論0 收藏0

發表評論

登陸后可評論

0條評論

Eidesen

男|高級講師

我要關注我要私信

TA的文章

算法-求最大公約數

閱讀 988·2021-11-23 09:51
PacificRack：2020年秋季促銷，洛杉磯便宜VPS，采用SSD硬盤，支持Linux或Win

閱讀 2700·2021-08-23 09:44
每天堅持一個CSS——社會人

閱讀 661·2019-08-30 15:54
我對line-height及vertical-align的一點理解

閱讀 1437·2019-08-30 13:53
前端分享

閱讀 3109·2019-08-29 16:54
html、css、js分工，內核，html頭，html表單

閱讀 2529·2019-08-29 16:26
啊~ 五環你比四環多一環啊~ 五環你比六環少一環

閱讀 1194·2019-08-29 13:04
vue-cli中配置webpack系列文章二 ------ check-versions.js

閱讀 2315·2019-08-26 13:50

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

學習HTML5 Canvas這一篇文章就夠了

相關文章

**Scrapy詳解爬蟲框架入門看這一篇就夠了！**

前端簡單面部識別

WorkManager從入門到實踐，有這一篇就夠了

發表評論

0條評論

Eidesen

男|高級講師

TA的文章

算法-求最大公約數

PacificRack：2020年秋季促銷，洛杉磯便宜VPS，采用SSD硬盤，支持Linux或Win

每天堅持一個CSS——社會人

我對line-height及vertical-align的一點理解

前端分享

html、css、js分工，內核，html頭，html表單

啊~ 五環你比四環多一環啊~ 五環你比六環少一環

vue-cli中配置webpack系列文章二 ------ check-versions.js

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

學習HTML5 Canvas這一篇文章就夠了

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！