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");