WordPress、投稿記事にお絵かきボード(Canvas)をいれてみた!

 今回は、 canvasを使いお絵かきボードを作りました。10月はハロウィンということで、魔法使いっぽい絵を…クオリティの低さにびっくりします(笑)ぜひ、皆さんもお絵かきしてみてください!

 




※中途半端な完成具合なのでうまくマウスのカーソルから描いてくれません(笑) 

 コードの中身は下記の通りです。


HTML

<button id=”btn”>CLEAR</button>

<canvas id=”canvas”></canvas>

<style></style>

<script></script>

  • <button>タグで<button>の設置
  • <canvas>タグで<canvas>の設置
  • <style>タグでCSSの入込み
  • <script>タグでJavascriptの入込み

CSS

#canvas{
width:800px;    …………………   //canvasの横幅
height:400px;   …………………   //canvasの高さ
background-color:black;  ……  //canvasの色
border-radius: 15%;   …………  //canvasの形
}
#btn{
position:absolute;  ………………  //buttonの位置指定
top:250px; …………………………  //position…top
left:30px;   …………………………  //position…left
color:#white;   ……………………  //文字の色
background-color:black;   ……  //背景色
width:100px;   ……………………  //buttonの横幅 
height:100px;  ……………………  //buttonの高さ
border-radius: 50%;    …………  //buttonの形
}

Javascript

var btn = document.getElementById(‘btn’);
var ctx = canvas.getContext(‘2d’);
var mousex,mousey;
var state = false;   ……………………………………  //stateの部分にマウスが現在クリックされているかされていないか
var color = 0;
canvas.width = window.innerWidth – 2;
canvas.height = window.innerHeight – 2;
ctx.lineWidth = 10;   ………………………………… //線の太さ固定
ctx.lineCap = ’round’;  ……………………………… //ライン種類
canvas.addEventListener(‘mousemove’,mouseMove);
canvas.addEventListener(‘mousedown’,mouseDown); ……………  //クリックで書き始める場所を定める
canvas.addEventListener(‘mouseup’,mouseUp); ……………………  //クリックで書き終える場所を定める
btn.addEventListener(‘click’,clearBtn); …………………………………  //クリアボタンをクリックして消す
function clearBtn(){
ctx.clearRect(0,0, canvas.width, canvas.height);
}
function mouseDown(e){
mousex = e.clientX;
mousey = e.clientY;
state = true;
}
function mouseUp(){
state = false;
}
function mouseMove(e){
console.log(e.clientX); ……………………… //マウスのX座標を示している
if(!state) return;! ……………………………… //!で意味が逆になっている
//var w = Math.random() * 20; …………  //線の幅をランダムにする
//ctx.lineWidth = w; ………………………… //線の幅をランダム
color++;  …………………………………………  //カラーをカウントアップさせて色を変えている
ctx.strokeStyle = ‘hsl(‘+color+’,100%,50%)’; …………… //変数colorを代入,鮮やかさ,明るさ
ctx.beginPath(); ………………………………   //線
ctx.moveTo(mousex,mousey);  ……………………………… //線を書き始める値
ctx.lineTo(e.clientX, e.clientY); ………………………………//XとY座標
ctx.stroke();   ……………………………………  //線を引っ張れ
mousex = e.clientX;
mousey = e.clientY;
}

 

 

2 thoughts on “WordPress、投稿記事にお絵かきボード(Canvas)をいれてみた!

コメントを残す

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