[英]Drawing an image onto a canvas in Javascript
我希望使用單獨的Javascript文件將圖像繪制到HTML頁面的畫布上。 到目前為止,我擁有的HTML很好,我的問題似乎出在腳本之內。 這是我目前擁有的:
function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
var pic = new image();
pic.src="http://i1273.photobucket.com/albums/y418/Cloudtwonj/Backgroundtest_zps2a6a6b51.jpeg";
pic.addEventListener("load", function(){canvas.drawImage(pic,0,0,x.width,x.height)}, false);
}
window.addEventListener("load", doFirst, false);
誰能告訴我我做錯了什么或忘記了什么?
構造函數是Image
,而不是image
大寫問題!
var pic = new Image();
function doFirst() { var x = document.getElementById('canvas'); canvas = x.getContext('2d'); var pic = new Image(); pic.src = "http://i1273.photobucket.com/albums/y418/Cloudtwonj/Backgroundtest_zps2a6a6b51.jpeg"; pic.addEventListener("load", function() { canvas.drawImage(pic, 0, 0, x.width, x.height) }, false); } window.addEventListener("load", doFirst, false);
<canvas id="canvas"></canvas>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.