LogoMark.png

JavaScript/CanvasPaint のバックアップソース(No.1)

#author("2020-02-02T17:39:55+09:00;2019-12-25T13:21:51+09:00","default:inoue.ko","inoue.ko")
*JavaScript|お絵かきソフト
JavaScriptによる簡単なお絵かき
~


***事例1 マウスで線を描く [[→DEMO>https://design.kyusan-u.ac.jp/SampleSite/JS_SimplePaint]]
マウスの位置情報を用いたシンプルなお絵描きです。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>https://design.kyusan-u.ac.jp/SampleSite/JS_Paint/]]

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

~
~

~