JavaScriptのプログラム 2

描画　draw.js

//----------------------------

２－１　draw.jsの基本部分です



// draw.js
let canvas1 =document.getElementById("html_canvas");
let ctx = canvas1.getContext("2d");

let bg_img = new Image;
bg_img.src = "images/back.png";

// 描画の初期値設定
function draw_init(){
    ctx.drawImage(bg_img, 0, 0, 450,500);  
}

実行結果

//----------------------------

２－２　draw_init関数に　描画の初期値設定を　入れます

ofs_x = 40; ofs_y = 30; box_size = 40;

draw_init関数で再描画関数redraw関数を呼びます


// draw.js
let canvas1 =document.getElementById("html_canvas");
let ctx = canvas1.getContext("2d");

let bg_img = new Image;
bg_img.src = "images/back.png";

let ofs_x, ofs_y, box_size;

// 描画の初期値設定
function draw_init(){
    ctx.drawImage(bg_img, 0, 0, 450,500);  
    ofs_x = 40;
    ofs_y = 30;
    box_size = 40;

    redraw();
}

// 再描画の基本描画
function redraw(){
}

//----------------------------

２－３　再描画関数　redraw の作りこみ

redraw();

redraw関数の中で draw_koshi関数により格子を描きます


// draw.js
let canvas1 =document.getElementById("html_canvas");
let ctx = canvas1.getContext("2d");

let bg_img = new Image;
bg_img.src = "images/back.png";

let ofs_x, ofs_y, box_size;

// 描画の初期値設定
function draw_init(){
    ctx.drawImage(bg_img, 0, 0, 450,500);  
    ofs_x = 40;
    ofs_y = 30;
    box_size = 40;

    redraw();
}

// 再描画
function redraw(){
   draw_koshi();
}

// 格子の描画
function draw_koshi(){  
    let i, j;
    ctx.fillStyle = "midnightblue";
    for( i=0; i<10;i++){
        ctx.fillRect(i*box_size + ofs_x,  ofs_y, 5, 9*box_size);
    }
    for( j=0; j<10; j++){
        ctx.fillRect( ofs_x, j*box_size + ofs_y, 9*box_size, 5);
    }

    ctx.fillStyle = "blue";
    for( i=0; i<11; i++){
        ctx.fillRect(i*box_size + ofs_x,  10*box_size +ofs_y, 5, box_size);
    }
    for( j=10; j<12; j++){
        ctx.fillRect( ofs_x, j*box_size + ofs_y, 10*box_size, 5);
    }

    label1.insertAdjacentHTML("beforeend","<p>x:  y:  </p>");
}

実行結果

//----------------------------

２－４　再描画関数　redrawの作りこみ　数字の表示

redraw();

draw_suji関数の中で数字を描きます


// draw.js
let canvas1 =document.getElementById("html_canvas");
let ctx = canvas1.getContext("2d");

let bg_img = new Image;
bg_img.src = "images/back.png";

let ofs_x, ofs_y, box_size;

// 描画の初期値設定
function draw_init(){
    ctx.drawImage(bg_img, 0, 0, 450,500);  
    ofs_x = 40;
    ofs_y = 30;
    box_size = 40;

    redraw();
}

// 再描画
function redraw(){
   draw_koshi();
   draw_suji_sentaku();
}

// 格子の描画
function draw_koshi(){  
    let i, j;
    ctx.fillStyle = "midnightblue";
    for( i=0; i<10;i++){
        ctx.fillRect(i*box_size + ofs_x,  ofs_y, 5, 9*box_size);
    }
    for( j=0; j<10; j++){
        ctx.fillRect( ofs_x, j*box_size + ofs_y, 9*box_size, 5);
    }

    ctx.fillStyle = "blue";
    for( i=0; i<11; i++){
        ctx.fillRect(i*box_size + ofs_x,  10*box_size +ofs_y, 5, box_size);
    }
    for( j=10; j<12; j++){
        ctx.fillRect( ofs_x, j*box_size + ofs_y, 10*box_size, 5);
    }
}

// 数字選択欄の描画
function draw_suji_sentaku(){  
    let i, j;

    // 数字の表示
    ctx.fillStyle = "black";
    ctx.font = box_size + "px serif";
    for( i=1; i<10; i++){
        ctx.fillText(""+i, (i-0.7)*box_size + ofs_x,  10.9*box_size +ofs_y);
    }
   
    label1.insertAdjacentHTML("beforeend","<p>x:  y:  </p>");
}

実行結果

//----------------------------

次に　マウスのｊｓファイルを作成します

JavaScriptのプログラム 2

描画 draw.js

描画　draw.js