【基礎知識】HTML 5 CanvasにおけるCanvasマウスイベント(2つの方法)

私の処女作「Canvasシリーズチュートリアル」は私のGithubで連載中で更新されています.あなたの注目と支持を得て、私にもっと多くの動力を創作させたいと思っています.
チュートリアル紹介、チュートリアルカタログなどはREADMEで閲覧できます.
転送ゲート:https://github.com/827652549/CanvasStudy
方法1
このようにすることができます

var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');
    
    canvas.onmousedown = function (e) {
        //  canvas       
    }

同様にonmousemove、onmouseup、onmouseoutなど
方法2
より一般的なaddEventListener()メソッドでリスナーを登録

canvas.addEventListener('mousedown',function (ev) {
        //  canvas       
    })

シーンの適用
onmousedownのようにListenerを登録するのはaddEventListener()より少し簡単ですが、複数のListenerを登録する場合はaddEventListene()を使用する必要があります