为什么在此示例中图像没有显示到 Canvas 上？
代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
/*
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
screen.lockOrientation('landscape');
if (lockOrientation("landscape-primary")) {
screen.lockOrientation('landscape');
}
*/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 10;
var y = 10;
var width = 470;
var height = 310;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</head>
<body>
<canvas id="myCanvas" width="470" height="310" style="border:5px solid #123456;"></canvas>
</body>
</html>
最佳答案
您需要等待文档加载，然后才能尝试选择页面中的元素。
尝试像这样包装你的代码:
window.onload = function() {
// your code goes here
};
关于javascript - 为什么图像不显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25538734/