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;    // マウスのウインドウ内 x,y座標を計算するための変数
        var rect = e.target.getBoundingClientRect();
        x = e.clientX - rect.left;  // マウスのx座標 - ウインドウx左端座標
        y = e.clientY - rect.top;   // マウスのy座標 - ウインドウy上端座標
        var c1 = canv1.getContext('2d');
        c1.beginPath();
        c1.fillStyle = 'rgb(255,128,0)';  // オレンジ色を選択
        c1.shadowColor = 'rgb(0,0,0)';    // 黒を影の色として選択
        c1.shadowOffsetX = 3;             // 影のxオフセット=3ドット
        c1.shadowOffsetY = 3;             // 影のyオフセット=3ドット
        c1.shadowBlur = 5;                // 影の太さ=5ドット
        c1.rect(x,y, 18, 18);             // x,y座標に18x18方形を描画する
        c1.fill();                        // 塗りつぶす
    }
    function draw_canvas() {
        /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
        if (!canv1 || !canv1.getContext) {
            return false;
        }
        canv1.onmousemove = mousemove;
    }

このプロうグラムは、通常通りにcanvas タグ、scriptタグを作ってから、scriptタグ内に記入する。canvasタグ、scriptタグの作り方は -> こちら

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

 

練習問題

練習1: 表示される色を青に変更してみよ。

練習2: 描画される図形を半径2ドットの影のない「円」にしてみよ。

練習3: 描画される図形を2ドットずつずれた7つの円とし、7色としてみよ。

 

参考

HTML5 Japan CUP

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