HTML5 CANVAS中如何繪制圖片

本文將為大家詳細介紹“HTML5 CANVAS中如何繪制圖片”，內容步驟清晰詳細，細節處理妥當，而小編每天都會更新不同的知識點，希望這篇“HTML5 CANVAS中如何繪制圖片”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內容如下，一起去收獲新知識吧。

html有什么特點

1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發者使用。 2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。  3、平臺無關性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網盛行的一個原因。 4、通用性：HTML是網絡的通用語言，它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

HTML5 CANVAS：繪制圖片

通過前面的學習，我們現在已經可以在HTML5 canvas中繪制圖形和文字，并給它們設置一些樣式。我們還可以在<canvas>中繪制圖片。用于在<canvas>作為繪制源的圖片可以是下面的幾種元素類型：

HTMLImageElement：可以是由Image()構造函數創建的圖片，也可以是任何的<img>元素。

HTMLVideoElement：使用一個HTML<video>元素作為圖片源，會從視頻中截取當前幀作為圖片源。

HTMLCanvasElement：也可以使用另一個<canvas>元素作為圖片源。

　　繪制圖片
　　我們可以通過2D上下文的三種方法來在

• 　　drawImage(image, dx, dy);

• 　　drawImage(image, dx, dy, dw, dh);

• 　　drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dw, dh);
  

　　基本繪制圖片方法：drawImage(image, dx, dy)
　　這個方法是在

　　下面是一個例子。這個例子在

var ctx = document.getElementById('ex1').getContext('2d');
var img = new Image();
img.onload = function(){
    ctx.drawImage(img,0,0);
};
img.src = 'img/canvas-image-1.jpg';

1. 　　上面的代碼的返回結果如下：

　　繪制并縮放圖片：drawImage(image, dx, dy, dw, dh)
　　第二種在
　　下面的例子中，我們將繪制的圖片縮小1/3左右，然后將它重復排列形成一個網格。

var ctx = document.getElementById('ex2').getContext('2d');
var img = new Image();
img.onload = function(){
    for (var i=0;i<4;i++){
      for (var j=0;j<5;j++){
        ctx.drawImage(img,j*60,i*60,60,60);
      }
    }
};
img.src = 'img/canvas-image-2.jpg';

　　上面的代碼的返回結果如下：

　　圖片切片方法：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dw, dh)
　　第三種在<canvas>中繪制圖片的方法有8個參數。image是源圖片，sx和sy是“sourceX”和“sourceY”的簡寫，這兩個參數決定從什么位置開始在源圖片上裁剪出一個矩形區域，這個區域的圖片將會被繪制在Canvas中。sWidth和sHeight表示矩形區域的寬度和高度。剩下的4個參數和上面的繪制圖片方法中的描述相同。看下面的圖片，圖片上標出了各個參數的位置。

　　來看下面的一個例子。這個例子中，我們將源圖片剪裁出一部分，然后將它繪制在canvas的一個邊框圖片之上。

var canvas = document.getElementById('ex3');
var ctx = canvas.getContext('2d');
// 繪制圖片切片
ctx.drawImage(document.getElementById('source'),
            98, 205, 104, 124, 21, 20, 87, 104);
// 繪制邊框圖片
ctx.drawImage(document.getElementById('frame'),0,0);

1. 　　上面的代碼得到的結果如下：

　　創建和調用圖片
　　在你能夠在Canvas中繪制圖片之前，你需要創建一個Image對象，然后將圖片加載到內存中。下面是完成這個操作的js代碼：

var image = new Image();
image.src = "img/sample.png";

　　在你能夠繪制圖片之前，圖片必須被完全加載。為了確保圖片被完全加載，你可以為圖片添加一個事件監聽，這個事件監聽中的方法會在圖片被完全加載之后被調用。下面是一個示例代碼：

image.addEventListener('load', drawImage1);

1. 　　或者：

var img = new Image();
img.onload = function(){
    ctx.drawImage(img,0,0);
};

如果你能讀到這里，小編希望你對“HTML5 CANVAS中如何繪制圖片”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內容的文章，歡迎關注億速云行業資訊頻道！