onmousemoveを使ったプログラム

枠内でマウスポインタを移動すると模様が描かれる
このプログラムは onmousemove を使用している
     /* canvas要素のノードオブジェクト */
    var canv1 = document.getElementById('canvas_id');
    var nn,rr,gg;
    onload = function () {
        draw_canvas();
    };
    /* onmousemove の例: 
    たとえば http://www.ilovex.co.jp/blog/system/html5-canvas-2.html
    を参考とした
     */
    function mousemove(e) {
        var x, y;
        var rect = e.target.getBoundingClientRect();
       x = e.clientX - rect.left;
        y = e.clientY - rect.top;
        var c1 = canv1.getContext('2d');
        c1.beginPath();
        c1.fillStyle = 'rgb(255,128,0)';
        c1.shadowColor = 'rgb(0,0,0)';
        c1.shadowOffsetX = 3;
        c1.shadowOffsetY = 3;
        c1.shadowBlur = 5;
        c1.rect(x,y, 18, 18);
        c1.fill();
    }
    function draw_canvas() {
        /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
        if (!canv1 || !canv1.getContext) {
            return false;
        }
        canv1.onmousemove = mousemove;
    }

    
        
onmousemove の基本的プログラム
/* canv1, c1はmousemove関数でも参照するから、帯域変数として定義しておく*/

var canv1;
var c1;

onload = pageload;

/* ページがロードされた際に実行する関数 */
function pageload() {
    canv1 = document.getElementById('canvas_id');
    if (!canv1 || !canv1.getContext) {
        return false;
    }
    c1 = canv1.getContext('2d');
    /* マウスが移動した際に mousemove 関数を実行するように設定する */
    canv1.onmousemove = mousemove;
};
/* mouseが移動した際に実行する関数 */
function mousemove(e) {
    var rect = e.target.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;
    c1.clearRect(0, 0, 400, 400);
    c1.fillStyle = 'rgb(0,0,255)';
    c1.fillRect(x-5, y-5, 10, 10);
}
          
HTML5 Japan CUP

https://5jcup.org/works/all