[英]Drawing an image onto a canvas in Javascript
I'm looking to draw an image onto a canvas for my HTML page using a separate Javascript file. 我希望使用单独的Javascript文件将图像绘制到HTML页面的画布上。 The HTML I have thus far is fine, my problem seems to lie within the script.
到目前为止,我拥有的HTML很好,我的问题似乎出在脚本之内。 This is what I have currently:
这是我目前拥有的:
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);
Can anyone tell me what I might have done wrong or forgot? 谁能告诉我我做错了什么或忘记了什么?
The constructor is Image
, not image
- capitalization matters! 构造函数是
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.