我希望使用单独的 Javascript 文件在 HTML 页面的 Canvas 上绘制图像。到目前为止我的 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>
关于javascript - 用 Javascript 将图像绘制到 Canvas 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26566650/