canvas 繪製圖片

前面咱們瞭解了canvas的一些基本使用方法,在canvas中咱們還能夠在canvas中直接繪製圖片,在canvas中繪製圖片主要使用到drawImage方法canvas

一:drawImage方法參數有三中狀況spa

1:三個參數code

ctx.drawImage(image,dx,dy)

image:須要繪製的img圖片 blog

dx,dy:繪製的img圖片在canvas中的座標(x,y)圖片

2:五個參數rem

ctx.drawImage(image,dx,dy,dw,dh)

image:須要繪製的img圖片 get

dx,dy:繪製的img圖片在canvas中的座標(x,y)it

dw,dh:繪製的img圖片在canvas中的大小(w,h)寬高io

3:9個參數(用於切片),通俗的說就是將圖片進行特定裁剪而後放到指定的位置function

ctx.drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh)

image:須要繪製的img圖片

sx, sy, sw, sh:定義圖像源的切片位置和大小

dx, dy, dw, dh:定義切片的目標顯示位置和大小

二:在canvas中繪製圖片分兩種狀況

1:有現成的img圖片,將img標籤中的圖片繪製到canvas中

var canvas = document.getElementById("myCanvas");  
if (!canvas.getContext) {  
    return '不支持canvas'  
}  
var ctx=canvas.getContext("2d")  
//建立圖片  
var img = document.querySelector("img");  
//繪製圖片  
ctx.drawImage(img, 0, 0)

2:從零開始建立圖片

var canvas = document.getElementById("myCanvas");  
if (!canvas.getContext) {  
    return '不支持canvas'  
}  
var ctx=canvas.getContext("2d")  
//建立圖片  
var img = new Image();   // 建立一個<img>元素  
img.onload = function(){  
    ctx.drawImage(img, 0, 0)//繪製圖片  
}  
img.src = 'wj.jpg'; // 設置圖片源地址

三:根據上面drawImage參數的三種狀況,咱們來分別實現,看看效果

1:ctx.drawImage(image,dx,dy):將原始圖片繪製到canvas中

var canvas = document.getElementById("myCanvas");  
if (!canvas.getContext) {  
    return '不支持canvas'  
}  
var ctx=canvas.getContext("2d")  
//建立圖片  
var img = new Image();   // 建立一個<img>元素  
img.onload = function(){  
    ctx.drawImage(img, 0, 0)//繪製圖片  
}  
img.src = 'wj.jpg'; // 設置圖片源地址

image.png

2:ctx.drawImage(image,dx,dy,dw,dh):給圖片設置大小繪製到canvas中

var canvas = document.getElementById("myCanvas");  
if (!canvas.getContext) {  
    return '不支持canvas'  
}  
var ctx=canvas.getContext("2d")  
//建立圖片  
var img = new Image();   // 建立一個<img>元素  
img.onload = function(){  
    ctx.drawImage(img, 0, 0, 50, 50)//繪製圖片  
}  
img.src = 'wj.jpg'; // 設置圖片源地址

image.png

3:ctx.drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh):切片,將圖片進行特定裁剪而後放到指定的位置

var canvas = document.getElementById("myCanvas");  
if (!canvas.getContext) {  
    return '不支持canvas'  
}  
var ctx=canvas.getContext("2d")  
//建立圖片  
var img = new Image();   // 建立一個<img>元素  
img.onload = function(){  
    ctx.drawImage(img, 0, 0, 200, 200, 10, 10, 200, 250)  
}  
img.src = 'wj.jpg'; // 設置圖片源地址

image.png

相關文章
相關標籤/搜索