我正在尝试使用HTML中的新canvas元素。
我只是想将图像添加到画布,但是由于某种原因它不起作用。
我有以下代码:
的HTML
<canvas id="viewport"></canvas>
的CSS
canvas#viewport { border: 1px solid white; width: 900px; }
JS
var canvas = document.getElementById('viewport'), context = canvas.getContext('2d'); make_base(); function make_base() { base_image = new Image(); base_image.src = 'img/base.png'; context.drawImage(base_image, 100, 100); }
图片存在,并且没有JavaScript错误。该图像只是不显示。
这一定是我错过的非常简单的事情…
也许您应该等到图像加载后才能绘制图像。尝试以下方法:
var canvas = document.getElementById('viewport'), context = canvas.getContext('2d'); make_base(); function make_base() { base_image = new Image(); base_image.src = 'img/base.png'; base_image.onload = function(){ context.drawImage(base_image, 0, 0); } }
即在图像的onload回调中绘制图像。