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>