Canvas之使用圖片

時間 2019-11-13

標籤 canvas 使用圖片简体版

原文原文鏈接

canvas有比較強的圖片操做能力。能夠用於動態的圖像合成或者做爲圖形的背景。瀏覽器支持任意格式如PNG、GIF、或者JPEG，你甚至能夠將同一個頁面中的其餘canvas元素生成的圖片做爲圖片源(toDataURL("image/png")，canvas.toDataURL('image/jpeg', quality))javascript

引用圖像到canvas基本的2步html

（1）獲取或者建立一個圖片對象或者另外一個canvas的元素的引用做爲源，也能夠經過提供一個URL的方式來使用圖片java

（2）使用drawImage()函數將圖片繪製到畫布上canvas

建立圖像瀏覽器

var img = new Image();
img.src = "myImage.png";
drawImage();緩存

當腳本執行後，圖片開始裝載，若調用drawImage時，圖片沒有裝載完，那什麼都不會發生（有些舊的瀏覽器可能會拋出異常），所以應該用load事件來保證不會在加載完畢以前使用這個圖片，上面的代碼改爲服務器

var img = new Image(); // 建立img元素
img.onload = function(){
// 執行drawImage語句
}
img.src = 'myImage.png'; // 設置圖片源地址函數

除了設置圖片源地址還能夠使用Base64編碼的字符串的格式來定義一個圖片編碼

img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAA url

其優勢是圖片內容即時可用，無需再到服務器兜一圈，缺點是圖像無法緩存，圖片大的話內嵌的url數據會至關的長

在畫布上繪製圖片

一旦得到了源圖對象，咱們就能夠使用drawImage方法將它渲染到canvas裏。drawImage方法有3種狀態，下面是最基礎的一種

drawImage(image,x,y) //x和y是其在目標canvas裏的起始座標

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img,0,0);
      ctx.beginPath();
      ctx.moveTo(30,96);
      ctx.lineTo(70,66);
      ctx.lineTo(103,76);
      ctx.lineTo(170,15);
      ctx.stroke();
    }
    img.src = 'images/backdrop.png';
  }

第二種是能夠縮放

drawImage(image, x, y, width, height) //增長的width和height是用來控制當向canvas畫入時應該縮放的大小

function draw(){
  var ctx = document.getElementById("canvas").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*100,i*100,100,100)
        }
    }
  }
  img.src = "images/avatar.png"
}

第三種是比較複雜的切片Slicing

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

第一個參數是跟其餘2個是同樣的，後面的8個參數參照下圖

<body>
    <img src="images/test.jpg" alt="" style="display:none" id="source">
    <img src="images/testframe.png" alt="" style="display:none" id="frame">
    <canvas id="canvas" width="600" height="400" style="background:pink;"></canvas>
    <script>
    function draw() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.drawImage(document.getElementById("source"), 80, 80, 240, 240, 22, 21, 240, 240);
        ctx.drawImage(document.getElementById("frame"), 0, 0);
    }
    draw()
    </script>
</body>

最後還有一種比較簡單的將圖片繪製到canvas的方法 圖案樣式 Patterns

createPattern(image, type)

該方法接受兩個參數。Image 能夠是一個 Image 對象的引用，或者另外一個 canvas 對象。Type 必須是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

function draw(){
  var ctx = document.getElementById("canvas").getContext("2d");
  var image = new Image();
  image.src = "images/avatar.png";
  image.onload = function(){
    var pattern = ctx.createPattern(image,"no-repeat");
	ctx.fillStyle = pattern;
	ctx.fillRect(0,0,600,300)
  }
}
draw()

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。