JavaScript Canvas在onchange事件中不起作用

Question

如果删除此部分，则以下代码有效：

checkboxPencil.onchange = function() {
    if(checkboxPencil.checked) {

如果可以，我可以在画布上绘画，否则不能。

因为我想在onc​​hange上做一些事情，所以我需要用onchange Event包装函数并检查是否选中了Checkbox。

但是我不明白为什么这不适用于上面的2行。 我在Chrome开发人员控制台中没有收到任何错误。

同样，如果删除上面的两行，我的代码也可以工作，但是如果我添加它们，则我的代码不起作用，并且我不明白为什么。

完整代码：

if(window.addEventListener) {
    window.addEventListener('load', function () {

    ...

    // Initialization sequence.
    function init () {

        canvas = document.getElementById('imageView');


        tool = new tool_pencil();

        canvas.addEventListener('mousedown', ev_canvas, false);
        canvas.addEventListener('mousemove', ev_canvas, false);
        canvas.addEventListener('mouseup', ev_canvas, false);
    }

    function tool_pencil() {

        var tool = this;
        this.started = false;

        checkboxPencil.onchange = function() {
            if(checkboxPencil.checked) {
                console.log("Pencil checked");

                this.mousedown = function (ev) {
                    context.beginPath();
                    context.moveTo(ev._x, ev._y);
                    tool.started = true;
                };

                this.mousemove = function (ev) {
                    if (tool.started) {
                        context.lineTo(ev._x, ev._y);
                        context.stroke();
                    }
                };

                this.mouseup = function (ev) {
                    if (tool.started) {
                        tool.mousemove(ev);
                        tool.started = false;
                    }
                };
            } else {
                console.log("Pencil not checked");
            }
        }
    }

Answer 1

发生此问题的原因是，在将鼠标事件侦听器回调函数添加到画布时尚未将其初始化。

您应该在画布上绘制之前先检查是否已选中该复选框。

 window.addEventListener('load', init); function init() { canvas = document.getElementById('imageView'); checkboxPencil = document.getElementById('checkboxPencil'); context = canvas.getContext("2d"); tool = new tool_pencil(); canvas.addEventListener('mousedown', tool.mousedown, false); canvas.addEventListener('mousemove', tool.mousemove, false); canvas.addEventListener('mouseup', tool.mouseup, false); } function tool_pencil() { this.started = false; this.mousedown = function(ev) { if (checkboxPencil.checked) { context.beginPath(); context.moveTo(ev.offsetX, ev.offsetY); this.started = true; } }; this.mousemove = function(ev) { canvas.style.cursor = 'default'; if (this.started && checkboxPencil.checked) { context.lineTo(ev.offsetX, ev.offsetY); context.stroke(); } }; this.mouseup = function(ev) { if (this.started && checkboxPencil.checked) { this.started = false; } }; } 

 canvas { border: 1px solid black; } 

 <canvas id="imageView" width="300" height="300"></canvas> <input type="checkbox" id="checkboxPencil">Pencil 

Answer 2

我没有足够的上下文来运行您的代码，但是我认为我至少可以猜测出部分问题...

我假设checkboxPencil已被初始化为var checkboxPencil = document.getElementById('my_checkbox_element')或类似名称。 为此，需要在您省略的部分的window.onload代码中声明checkboxPencil 。

我还假设该tool是在该省略的部分或全局中声明的。 否则，行tool = new tool_pencil()不会执行任何操作。

而且，我假设ev_canvas是一个调用tool对象的相关mousedown / mouseup / mousemove方法的函数。

如果所有这些假设都是正确的，则最明显的问题是您将mousedown等功能附加到了错误的对象上。 因为你是内使分配onchange的HTML checkbox元素的处理程序，该代码运行时， this将涉及复选框元素，而不是封闭tool_pencil对象。 我相信你想改变路线

this.mousedown = function (ev) {

（等）到

tool.mousedown = function (ev) {

在这种情况下， tool通过闭包指代tool_pencil函数的局部变量tool 。

另一个问题是它看起来好像没有定义context 。 可能您想在代码的省略部分中声明它，然后在初始化canvas之后立即添加以下行

context = canvas.getContext("2d");