<label id="tz8wz"></label>
課程
/前端開發
/Html5
/Canvas繪圖詳解
使用createPattern方法的時候，圖片大小比canvas大，怎么自動縮放？就讓圖片百分百在canvas里面顯示？
2018-01-11
源自：Canvas繪圖詳解 1-1
正在回答
圖片比canvas的寬高大的時候可以創建一個新的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);
}
性別男愛好女
舉報
Canvas系列教程第二課,詳解Canvas各接口，讓同學徹底掌握Canvas繪圖
1 回答createPattern 參數是canvas時 這個地方canvas和另一個canvas是一個對象嗎？
2 回答canvas背景設置成一張圖片就不成
1 回答canvas繪制地圖
1 回答canvas
1 回答canvas 在iPhone5 和iPhone6splus 字體差別大
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2018-01-22
圖片比canvas的寬高大的時候可以創建一個新的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);
}