2019/8/25(前半発表) 「HTML5とJavaScriptでつくる簡易お絵かきソフト」ソースコード

当日発表&使用するソースコードです。

<!-- ==========================================
  「HTML5とJavaScriptでつくる簡易お絵かきソフト」
  Developed by Y.Torii in Japan 2019/07
========================================== -->

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
</head>

<body>

        <canvas id="canvas1" width="1400" height="700"></canvas>

        <div class='div1'>
                <div id='NowMode'>現在の描画モード:ペン</div>
                <button onclick="ChangeMode('pencil')">ペン</button>
                <button onclick="ChangeMode('eraser')">消しゴム</button>
                <button onclick="AllClear()">全部消す</button>
        
        </div>
        
        


</body>

<script>

//グローバル変数を辞書形式変数で、ひとまとめに定義。
var canvas1,ctx1;
var _gl = {
        r:5,
        nowmode: "pencil",
        nowmousedown: false,

        beforeX:null,
        beforeY:null

};

function Init_Canvas1() {

        canvas1 = document.getElementById('canvas1');
        ctx1 = canvas1.getContext('2d');

        var _w = canvas1.width;
        var _h = canvas1.height;

}






function ChangeMode(_mode){
        function ShowMode(_str){
                document.getElementById("NowMode").innerHTML = "現在の描画モード:" + _str;
        }
        switch (_mode){
                case 'pencil':
                        ShowMode("ペン");
                        _gl.nowmode = _mode;
                        break;
                case 'eraser':
                        ShowMode("消しゴム");
                        _gl.nowmode = _mode;
                        break;
        }
}

function AllClear(){
        if (window.confirm("キャンバスを全て消してもよろしいですか?")){
                ctx1.clearRect(0,0,canvas1.width,canvas1.height);
        }



}

function Draw(_x,_y){
        if (_gl.nowmousedown){
                if (_gl.nowmode == "pencil"){
                        ctx1.beginPath();
                        ctx1.strokeStyle = "black";
                        ctx1.lineWidth = 2;
                        ctx1.moveTo(_gl.beforeX,_gl.beforeY);
                        ctx1.lineTo(_x,_y);
                        ctx1.stroke();
                        ctx1.closePath();

                        _gl.beforeX = _x;
                        _gl.beforeY = _y;

                }
                else {
                        ctx1.beginPath();
                        ctx1.strokeStyle = "white";
                        ctx1.lineWidth = 10;
                        ctx1.moveTo(_gl.beforeX,_gl.beforeY);
                        ctx1.lineTo(_x,_y);
                        ctx1.stroke();
                        ctx1.closePath();

                        _gl.beforeX = _x;
                        _gl.beforeY = _y;
                }
        }
}



function Main(){
        Init_Canvas1();

        //イベント設定
        //マウスが押されたときに呼ばれる関数
        document.getElementById('canvas1').onmousedown = function(event){
                _gl.nowmousedown = true;

                _gl.beforeX = event.clientX;
                _gl.beforeY = event.clientY;
        }
        //マウスが離された時に呼ばれる関数
        document.getElementById('canvas1').onmouseup = function(event){
                _gl.nowmousedown = false;
        }

        //マウスカーソルが、とにかくブラウザ上を動いている時にずっと呼ばれ続ける関数
        document.addEventListener("mousemove",function(event){
                var x = event.clientX;
                var y = event.clientY;
                Draw(x,y);
                //console.log((x)+"/"+(y));
        },false);


}

Main();





</script>

<style>
*{
        font-family: Arial;
}
body{
        background-color: aqua;
        z-index: 0;
}
canvas{
        margin: 0;
        padding: 0;
        top:0;
        left:0;
        background-color: white;
        z-index: 10;
}

</style>




</html>

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です