createPattern 當(dāng)圖片比canvas大
使用createPattern方法的時(shí)候，圖片大小比canvas大，怎么自動(dòng)縮放？就讓圖片百分百在canvas里面顯示？
1 回答
舉報(bào)
0/150
提交
取消
使用createPattern方法的時(shí)候，圖片大小比canvas大，怎么自動(dòng)縮放？就讓圖片百分百在canvas里面顯示？
2018-01-11
舉報(bào)
2018-01-22
圖片比canvas的寬高大的時(shí)候可以創(chuàng)建一個(gè)新的canvas來把圖片畫上去，然后再將該canvas作為createPattern的圖片放上去，代碼如下：
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;
var into = document.createElement("canvas");
var ctx2 = into.getContext('2d');
into.width = 50;
into.height = 50;
var img = new Image();
img.src = '1.jpg';
img.onload = function() {
? ? ctx2.drawImage(img,0,0,50,50);
? ? var pattern = ctx.createPattern(into, 'no-repeat');
? ? ctx.fillStyle = pattern;
? ? ctx.fillRect(0, 0, 800, 800);
}