はじめに
えーということで2回目の投稿になりました。(Advent calenderってこんなに 投稿していいのかな…)13日目の記事となります。
Canvasって何？
キャンバスとは、まあ俗に言う絵を描くための紙とかそういったものを言います。詳しくはwikipedia先生に投げておきますね。
で、今回は画材なんて無いが、絵を描きたいとか言う人向けに記事を書いております。 というわけで、今回扱いたいものを記載
- 絵を書ける
- 描いた絵を保存できる
- ただで使える
- カスタマイズ性がある
- 環境が変わっても使える
という感じになっております。 要は、ブラウザでお絵かきツールを作りたいという感じになりますね(拡大解釈)
今回は以下の環境を想定しています
- Safari1.3以降
- Opera9以降
- Firefox1.5以降
- IE?Edge?それ以外?知らない子だねぇ。(実装されていなかったり、googleがエミュレートライブラリを公開したりと、色々がんばっているようです…ブラウザ事情はここら辺を何とかしてもらいたいものです。)
今回、自分はFirefoxの63.03を使っております。
html5って知ってるかな？
アホみたいな質問ですが、実は意外と知られていないタグた多く入っております。 例えば、videoタグとかってご存知ですか？これはvideo等を簡単に埋め込める html5から導入されたタグです。 そう!何が言いたいかというと、実はCanvasというタグも存在するのです。とりあえずwikipediaはっときますね
じゃあ使ってみよう
以下にcanvasタグをそのまま貼ってみます。 はい、もちろん何も出ませんね。
実は上の謎の空白欄にcanvasが用意されているのですが…(気になる人はソース見てください)
どうしてくれるのこれ、Canvasの意味が無いやん
Canvasとは、ブラウザ上に図を描くために策定された仕様です。
これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashやJavaアプレットが使われてきました。
Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。
実はcanvasさんは、用意するだけでは特に意味が無く、ここからJavaScript等を使って作画をしなければいけないのです。
ぜんぜんJavaScriptわかんないとかいう方でも、とりあえず図を書いて見るところからはじめるので大丈夫なように説明する(つもり…)
お絵かきの手始め
じゃあとりあえずまずは図形を描いてみようと思います。
まずは適当なcanvasを用意したhtmlを作ります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<script></script>
</head>
<body>
<h1>Canvasの練習</h1>
<canvas id="mycanvas" width="150" height="150"></canvas>
</body>
</html>
とまあこんな感じですね。解説しておくと、canvasのwidth、height属性はそれぞれ幅、高さを指定しています。今回の場合150×150のcanvasを作成ということになります。
idというのは、htmlタグを指定するためのもの(初心者の内はそう思っとけ)で、これを指定することで、タグ自体をJavaScriptから取得できます。
詳しくは、DOMとかの記事を書いたときに…
これで、作画するための領域の準備は出来ました。
なんか書いてみよう
準備はこれで出来たので、早速書いてみましょう
先ほどの6行目あたりの<script>タグの中に以下を記述
onload = function(){
var canvas = document.getElementById("mycanvas");
if(!canvas || !canvas.getContext){
alert("don't support canvas");
return false;
}
var ctx = canvas.getContext("2d");
ctx.fillRect(10,10,140,140);
};
そうして、ブラウザでそのhtmlを読み込むと、以下のような黒い四角形が出るはずです。
解説をしておくと、getElementByIdで、canvasのidを指定して要素をとり、canvasから2dの作画用のオブジェクト?を取得します(2dが指定できるということは3dもあるのかという疑問もありますが、今のところ無いようです。)
そして、ctxに対して四角形の作画をお願いしているという感じです。
書けるようにしてみる
色々と用意されているAPIを見ると、これでお絵かきが出来そうな気がしてきます。
というわけでやってみましょう。
調べた結果、線をポジションで指定して書くものがあるので、これをマウスクリックの間行ってもらう事で出来るのではないかと思いました。
というわけで実践です。
以下のコードを<script>内に記述
clicked = false;
oldX = 0;
oldY = 0;
function draw(e) {
if(clicked == false){
return;
}
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
var r = e.target.getBoundingClientRect();
ctx.beginPath();
ctx.moveTo(oldX,oldY);
ctx.lineTo(e.clientX - r.left,e.clientY - r.top);
ctx.closePath();
ctx.stroke();
oldX = e.clientX - r.left;
oldY = e.clientY - r.top;
}
var canvas = document.getElementById("mycanvas");
canvas.addEventListener("mousemove",draw,false);
canvas.addEventListener("mousedown",function(e){
var r = e.target.getBoundingClientRect();
clicked = true;
oldX = e.clientX - r.left;
oldY = e.clientY - r.top;
},false);
canvas.addEventListener("mouseup",function(e) {
clicked = false;
});
あと、canvasのwidthとheightをわかりやすい大きさにしておけばいいと思います。
そして、widthとheightを350にして、上記のコードを適用したものが以下になります。
マウスで適当にクリックとかドラッグとかしてみてください。なんか線が出るはずです。(PCのみです。スマホは対応してませんすいません)
一応ちょっと解説を加えておくと、
addeventListenerで、マウスがクリックされたとき(mousedown)、動いたとき(mousemove)、クリックを解除したとき(mouseup)のイベントを追加しておきます。
- マウスがクリックされたとき
クリックされたときには、クリックされた判定のboolean型の変数にtrueを書き込み、さらに線のスタート位置であるoldX,Yに現在のマウスの位置を保存します。
- マウスが動いたとき
マウスが動いたときには、クリックされているかどうかを判定して、クリックされていたら、動かしたぶんだけ線を引くようにします。
beginPath()は線の開始
moveTo(x,y)は線の開始地点を指定します。
閉じるときはclosePath()して線を閉じるのと、stroke()して作画をするのを忘れないようにしてください。
- マウスクリックを解除したとき
解除したときは簡単で、クリックされた判定の変数にfalseを入れたらいいだけですね。
できた
というわけで、Canvasっぽく線を描くことに成功しました。線の太さとか色とか消しゴム機能なども実装することができますが、今回は長すぎるので続きはそのうちまとめて書きたいと思います。
ちなみに保存はfirefoxなら右クリックから名前をつけて画像を保存で保存できます。カスタマイズ製については次回！！(まあやりたい人は自分で調べてみてくれ)
感想
今の時代flashなんて無くてもこんなに作れるのかと思いました。世の中にはcssアニメーションなどもあるみたいなので、いろいろとやってみたいなーとおもいます。
