LogoMark.png

JavaScript/CanvasPaint

JavaScript|お絵かきソフト

JavaScriptによる簡単なお絵かき

事例1 マウスで線を描く →DEMO

マウスの位置情報を用いたシンプルなお絵描きです。index.html、style.css、sample.js の3つのソースコードをそれぞれテキストエディタにコピー&ペーストして、見出しにあるとおりのファイル名で同じフォルダに保存すれば、ローカルで動かすことができます。
注) Web標準ブラウザ:Firefox、Chrome、Safari等で動作確認しています。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css"  href="style.css">
        <script type="text/javascript" src="sample.js"></script>
        <title>Sample Page</title>
    </head>
    <body>
        <h1>Sample Graphics</h1>
        <canvas id="myCanvas" width="640" height="480" ></canvas>
        <p>JavaScriptによるCANVASへの描画</p>
    </body>
</html>


style.css

body {
    background-color: silver;
    color: white;
    text-align: center;
}
h1{
    font-size: 24pt;
}
canvas{
    background-color:black;
}


sample.js

var flag = false;
var oldX = 0;
var oldY = 0;

window.onload = function(){
	var cnvs = document.getElementById("myCanvas");
	cnvs.addEventListener("mousemove", draw, true);
	cnvs.addEventListener("mousedown", start, false);
	cnvs.addEventListener("mouseup", stop,false);
}

function draw(event){
	if (!flag) return;
	var rect = event.target.getBoundingClientRect();
	var x = event.clientX - rect.left;
	var y = event.clientY - rect.top;
	var cnvs = document.getElementById("myCanvas");
	var dc = cnvs.getContext("2d");
	dc.strokeStyle = "rgba(128,128,128,1)";
	dc.lineWidth = 1;
	dc.beginPath();
	dc.moveTo(oldX, oldY);
	dc.lineTo(x, y);
	dc.stroke();
	dc.closePath();
	oldX = x;
	oldY = y;
}

function start(event){
    flag = true;
    var rect = event.target.getBoundingClientRect();
    oldX = event.clientX - rect.left;
    oldY = event.clientY - rect.top;
}

function stop(){
    flag = false;
}


事例2 色やサイズを選んだお絵描き →DEMO

少し煩雑なので、このページでのソースの掲載は省略しますが、
Firefoxなどで、[ファイル]>[名前をつけてページを保存] すれば、HTML、CSS、JavaScript すべて一括でDLして見ることができますので、
その方法でご覧下さい。





PAGES

GUIDE

DATA

Last-modified: 2020-02-02 (日) 17:39:55