如何解决为什么我的图像不会显示在 javascript 画布上?
这是我这个类的构造函数里面的代码
this.canvas = document.getElementById("myCanvas");
this.canvasContext = this.canvas.getContext('2d');
this.canvasContext.font = "45px Arial";
this.canvas.onshow = function () {
console.log("here!");
window.renderer.updateDimesions();
这是我根据其质量划分单位的方法。目前它是一个原型代码。除了渲染图片外,一切正常。错误信息是“未捕获的类型错误:无法读取未定义的属性‘drawImage’”
drawUnits = function(SceneGraph,uType)
{
var aLength = window.SceneGraph.getLength();
var offset = 0;
for(var i = 0; i < aLength; i ++)
{
var length = SceneGraph.get(i).getLength();
var width = SceneGraph.get(i).getWidth();
var price = SceneGraph.get(i).getPrice();
var type = SceneGraph.get(i).getType();
var description = SceneGraph.get(i).getDescription();
var expanded = SceneGraph.get(i).getExpanded();
console.log(length,width,price,type,description);
if(expanded){
this.canvasContext.font = "45px Arial"
this.canvasContext.fillText(length + "x" + width,(i * 50) + 50 + offset)
this.canvasContext.fillText(price + "$",670,(i * 50) + 50 + offset)
this.canvasContext.beginPath();
this.canvasContext.rect(0,(i*50) + offset,774,50);
this.canvasContext.stroke();
//row with price and size
this.canvasContext.fillText("PICTURE",(i * 50 ) + 120)
this.canvasContext.font = "15px Arial"
this.wrapText(this.canvasContext,description,258,(i * 50)+ 70,516,20) //Html5canvastutorials.com. 2020. HTML5 Canvas Text Wrap Tutorial. [online] Available at: <https://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/> [Accessed 21 December 2020].
this.canvasContext.font = "30px Arial"
this.canvasContext.fillText("Click van to reserve unit",(i * 50) + 175)
this.canvasContext.font = "45px Arial"
var van = new Image();
van.src = "images/perfec1.jpg";
van.onload = function(){
this.canvasContext.drawImage(van,100,100);
}
// this.canvasContext.fillText("VAN",650,(i * 50) + 175)
offset = 150; // keep at end
}
解决方法
我通过将 onload 更改为事件侦听器来修复它
van.addEventListener('load',e => {
this.canvasContext.drawImage(van,516,(i* 50) - 18);
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。