お絵かきプログラム

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Draw</title>
    <style>

    </style>
  </head>
  <body>

<div style="text-align:center;">
<canvas id="testCanvas" width="320" height="320" style="border:1px solid #CCC;"></canvas>
</div>
<div style="text-align:center;font-size:12px;">
        <input name="mode" type="radio" value="0" id="rb0" onclick="changeLineL(2)"><label for="rb0">細</label>
        <input name="mode" type="radio" value="1" id="rb1" onclick="changeLineL(4)"><label for="rb1">中</label>
        <input name="mode" type="radio" value="2" id="rb2" onclick="changeLineL(6)"><label for="rb2">太</label>
</div>
<div style="text-align:center;font-size:12px;">
<label><input type="color" id="colorBox" value="#CC0000">色の選択</label>
</div>
<div style="text-align:center;font-size:12px;">
  <input type="checkbox" id="mycheckbox" name="scales" ><label for="scales">消しゴム</label>
</div>


<p style="text-align:center;">
        <input type="button" onclick="addImageData();" value="PNG画像作成">
        <input type="button" onclick="clearCanvas();" value="画面をクリア">
    </p>
<div style="text-align:center;">
        <img src="" alt="PNG画像" width="320" height="320" id="image_png" style="border:1px solid #CCC;">
</div>

<script>

//キャンバスの初期処理
var canvas = document.getElementById('testCanvas');

//2Dコンテキスト
var ctx = canvas.getContext('2d');

init();
addImageData();
    //
var rb = document.getElementById('rb0');
rb.checked = true;

var cW = 320;   //キャンバス横サイズ
var cH = 320;   //キャンバス縦サイズ
var touchM=0;//PC=0
var mouseX = new Array();//finger touch
var mouseY = new Array();
var mouseDownFlag = false;  //マウスダウンフラグ
var lineL = 2;  //線の太さ
var EraserMode=0;

var MyColor;
var colorB = document.getElementById('colorBox');
//colorBox.value = "#F0F0F0";

//colorB.value = "#CC0000";
colorB.addEventListener('change', function(){
  MyColor = this.value;
});
//=colorBox.value;



function init() {

    canvas.addEventListener('mousedown', function(e) {

        mDown(pos(e));
    });
    canvas.addEventListener('mouseup', function(e) {
        mUp(pos(e));
    });

    canvas.addEventListener('mousemove', function(e) {

        mMove(pos(e));
    });
    canvas.addEventListener('touchstart', function(e) {
        if (e.changedTouches.length == 1) {
            mDown(pos(e.changedTouches[0]));
        }
    });

    canvas.addEventListener('touchend', function(e) {
        if (e.changedTouches.length == 1) {
            mUp(pos(e.changedTouches[0]));
        }
    });
    canvas.addEventListener('touchmove', function(e) {
        e.preventDefault();
        if (e.changedTouches.length == 1) {
            mMove(pos(e.changedTouches[0]));
        }
    });
    canvas.addEventListener('touchcancel', function(e) {
        mOut();
    });
}




function mOut(e) {
    mouseDownFlag=false;
}


//座標調整

function pos(e) {
    var x, y;

        x = e.clientX - canvas.getBoundingClientRect().left;
        y = e.clientY - canvas.getBoundingClientRect().top;

    
    mouseX[0] =x;
    mouseY[0] =y;
    return [x, y];
}





function mUp(pos) {
    mouseDownFlag =false;
    
    
    
        
}




function mDown(pos) {

    mouseDownFlag = true;
    
    MyColor=colorBox.value;
            var element = document.getElementById('mycheckbox');
                if(element.checked){
                    EraserMode=1;
                }
                else{
                    EraserMode=0;
             }
  
    
}



function mMove(pos) {
    if (mouseDownFlag) {

            //座標調整
            //adjustXY(e);
            //円を描く
            ctx.beginPath();
            
            if(EraserMode==0){
                ctx.fillStyle = MyColor;
                ctx.arc(pos[0],pos[1], lineL , 0, Math.PI * 2, false);
            }
            else{
                ctx.clearRect(pos[0],pos[1], lineL ,lineL);
            }
            ctx.fill();
        }

}

//画像変換
function addImageData() {
    //キャンバスの初期処理
    var canvas = document.getElementById('testCanvas');
    if ( ! canvas || ! canvas.getContext ) return false;
    try {
        var img_png_src = canvas.toDataURL();
        document.getElementById("image_png").src = img_png_src;
    } catch(e) {
        document.getElementById("image_png").alt = "未対応";
    }
}
//線の太さ
function changeLineL(n) {
    lineL = n;
}

//クリア
function clearCanvas() {
    //キャンバスの初期処理
    var canvas = document.getElementById('testCanvas');
    if ( ! canvas || ! canvas.getContext ) return false;
    //2Dコンテキスト
    var ctx = canvas.getContext('2d');
    
    ctx.clearRect(0, 0, cW, cH);
    //画像描画
    addImageData();
}


</script>
  </body>
</html>
プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング >第２時限：美術

2-5: 目指せLineスタンプ・メーカー・メーカー

実際にやってみましょう

質問:

下絵って何？

提案

提案

2-5-1: ゼロからお絵描きが大変なら

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング

X320	X320