前面咱們瞭解了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'; // 設置圖片源地址
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'; // 設置圖片源地址
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'; // 設置圖片源地址