Question

为什么在此示例中图像不显示到画布？

代码：

<!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>

Answer 1

在尝试选择页面中的元素之前，您需要等待文档加载。

尝试像这样包装你的代码：

window.onload = function() {
  // your code goes here
};

为什么图像不显示？

1 个答案: