Javascript 画布在mousedown、sketch.js和；jquery 2.0.0

11我在这里使用的是

sketch.js

：和jquery 2.0.0

在我的页面上，我有一个图像列表，如下所示：

<a href="http://url.to/image"><img src="http://url.to/image"><br><span class="background">click for background</span></a>

相关JavaScript：

var winwidth = 800;
var winheight = 600;
$('#simple_sketch').attr('width', winwidth).attr('height', winheight);

$('#simple_sketch').sketch();
$('.background').on('click', function(event) {
    event.preventDefault();
    var imgurl = $(this).parent().attr('href');
    console.log('imgurl: ' + imgurl);
    var n = imgurl.split('/');
    var size = n.length;
    var file = '../webkort/' + n[size - 1];
    var sigCanvas = document.getElementById('simple_sketch');
    var context = sigCanvas.getContext('2d');
    var imageObj = new Image();
    imageObj.src = imgurl;
    imageObj.onload = function() {
        context.drawImage(this, 0, 0,sigCanvas.width,sigCanvas.height);
    };
    alert('background changed');
});

背景会按照我的要求进行更改，但每当我单击

画布

，背景图像就会被清除。根据对该线程的建议：我注释掉了

this.el.width=this.canvas.width（）

在

sketch.js

的116线上，但无效

感谢您的帮助

编辑：jsfiddle:

---

编辑：无法理解如何使用sketch.js执行此操作，因此改为使用jqScribble（在评论中发布的链接），它可以作为内置函数执行此操作。

在onload事件后在图像源上分配url。如果映像已加载，则事件可能在挂接它之前触发。这意味着永远不会调用您的

drawImage

var imageObj = new Image();
imageObj.onload = function() {
    context.drawImage(this, 0, 0,sigCanvas.width,sigCanvas.height);
};
imageObj.src = imgurl;

编辑：因为我不熟悉sketchjs，所以我打算在黑暗中进行拍摄

我认为您的问题在于，当您单击“更改背景”链接时，您正在完全重新渲染画布。请注意，如果绘制，然后单击“更改背景”，则会丢失图形

但是，请注意，再次单击后，背景将消失，并再次返回原始图形。这告诉我sketchjs正在跟踪它自己的内存画布上绘制的内容，然后将其放到目标上。那么，问题是，当绘制内存画布时，它会用自己的内容完全替换目标画布的内容

我注意到在一些sketchjs示例中，如果您想要背景，它们实际上会为画布指定背景样式。在您的示例中，您直接在画布上绘制背景。前面的方法可能有效，因为sketchjs知道在绘制时合并背景样式。然而，它不知道当你绘制新的背景图像时，它应该使用那个

---

你能改变画布元素上的背景样式而不是直接在画布上绘制吗？

在库-sketch.js中找到这一行并删除/注释它

this.el.width = this.canvas.width(); 

---

祝你好运，谢谢。不过没有什么不同。@user98680是

onload

事件触发吗？是的，看起来是。我在里面添加了一个console.log，它打印得很好。你能在jsfiddle.net上重现这个行为吗？啊，谢谢。我误解了什么，背景是什么。我以为那个活动是为了点击画布。在您的代码中，我看不到任何在画布上单击的事件，这使我想到beleive sketch.js正在监视单击事件并在画布上进行新的渲染。对sketchjs不太熟悉，不知道它在做什么。项目中实际使用的sketch.js是这样的：它有一些在JSFIDLE上没有的编辑。我现在还注意到，当鼠标离开画布时，画布会被重新绘制…：/JQScrible可在此处找到：

this.el.width = this.canvas.width();