JavaScript - Canvas不会显示图像

时间:2015-07-23 20:54:38

标签: javascript canvas html5-canvas

这段代码只是为了显示我导入的图像,但我无法弄清楚它为什么不起作用。谢谢你的帮助。

INSERT INTO

2 个答案:

答案 0 :(得分:2)

将在 onload 中更改。尝试设置如下变量:

var that = this;
this.im.onload 定义之前

您可以在此处试用:http://jsfiddle.net/8kv0px2m/

答案 1 :(得分:2)

这是一个范围问题,这就是为什么我倾向于在我解决此问题时命名我的变量范围(其他人使用另一个答案中提到的that或其他,没关系)。

所有这一切都会创建一个在其他任何地方都不使用的新变量。与this不同,this是引用当前范围内对象的特殊关键字。使用控制台日志记录尝试此代码,您应该看到差异。 外部 onload函数this引用您的FotoPrint实例,而内部 onload函数img引用var app = new FotoPrint(); function FotoPrint() { var _scope_ = this; _scope_.init = function() { console.log('`this` outside onload', this); console.log('`_scope_` outside onload', _scope_); _scope_.im = new Image(); _scope_.im.onload = function () { console.log('`this` inside onload', this); console.log('`_scope_` inside onload', _scope_); _scope_.canvas = document.getElementById('canvas'); _scope_.ctx = _scope_.canvas.getContext("2d"); _scope_.ctx.clearRect(0, 0, _scope_.canvas.width, _scope_.canvas.height); _scope_.ctx.strokeStyle = "black"; _scope_.ctx.lineWidth = 2; _scope_.ctx.strokeRect(0, 0, _scope_.canvas.width, _scope_.canvas.height); _scope_.ctx.drawImage(_scope_.im,0,0); }; _scope_.im.src = "Images/allison1.jpg"; }; }; app.init(); 实例。< / p>

MainWindow::on_qeLabel_dbValueChanged(QString const&)