こんにちは、WEBの佐野です。
今回は、html5のCanvasを使ったお絵描とき出来るコンテンツを作成してみました。
実装機能は、線の太さ・色を変更・画像ダウンロードなどシンプルなものになっているので、ぜひこれを改良しながら面白いお絵描きコンテンツを作ってみてください！
完成形のサンプル
まずは今回の完成品になります。
See the Pen
WNexBQw by otwo (@otwo)
on CodePen.
要点のいくつかを後述しますが、コピペ用のコードはこちら。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>お絵描き DEMO/title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">/script>
<style>
.option{
width: 250px;
}
.color > a{
display: inline-block;
width: 20px;
height: 20px;
}
.black{
background-color: #000000;
}
.red{
background-color: #ff0000;
}
.blue{
background-color: #0000ff;
}
</style>
</head>
<body>
ダウンロード
![]()
<script>
// canvas
var cnvs = document.getElementById('canvas');
var ctx = cnvs.getContext('2d');
// 変数宣言
const cnvWidth = 500;
const cnvHeight = 500;
var cnvColor = "255, 0, 0, 1"; // 線の色
var cnvBold = 5; // 線の太さ
var clickFlg = 0; // クリック中の判定 1:クリック開始 2:クリック中
var bgColor = "rgb(255,255,255)";
// canvasの背景色を設定(指定がない場合にjpeg保存すると背景が黒になる)
setBgColor();
// canvas上でのイベント
$("#canvas").mousedown(function(){
clickFlg = 1; // マウス押下開始
}).mouseup(function(){
clickFlg = 0; // マウス押下終了
}).mousemove(function(e){
// マウス移動処理
if(!clickFlg) return false;
draw(e.offsetX, e.offsetY);
});
// 描画処理
function draw(x, y) {
ctx.lineWidth = cnvBold;
ctx.strokeStyle = 'rgba('+cnvColor+')';
// 初回処理の判定
if (clickFlg == "1") {
clickFlg = "2";
ctx.beginPath();
ctx.lineCap = "round"; // 線を角丸にする
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
ctx.stroke();
};
// 色の変更
$(".color a").click(function(){
cnvColor = $(this).data("color");
return false;
});
// 線の太さ変更
$(".bold a").click(function(){
cnvBold = $(this).data("bold");
return false;
});
// 描画クリア
$("#clear").click(function(){
ctx.clearRect(0,0,cnvWidth,cnvHeight);
setBgColor();
});
// canvasを画像で保存
$("#download").click(function(){
canvas = document.getElementById('canvas');
var base64 = canvas.toDataURL("image/jpeg");
document.getElementById("download").href = base64;
});
function setBgColor(){
// canvasの背景色を設定(指定がない場合にjpeg保存すると背景が黒になる)
ctx.fillStyle = bgColor;
ctx.fillRect(0,0,cnvWidth,cnvHeight);
}
</script>
</body>
</html>
今回のコードはブログ用に短くしたかったので、操作に対する制御を細かく作り込んでいません。
基本的な操作は出来ますが、操作次第では思った挙動にならない場合もあるかもしれないので、そこはご容赦ください。
処理のポイント
上記のコード内でCanvas操作を行っている箇所をいくつか紹介しておきます。
線の引き方
線を引くのは2つのメソッドを使います。
moveToメソッド
moveTo(x座標,y座標)は直線を引く為の始点を宣言するメソッドになります。
引数にはcanvas範囲の左上からのx,y座標を指定します。
lineToメソッド
lineTo(x座標,y座標)は直線の終点を宣言するメソッドになります。
引数にはcanvas範囲の左上からのx,y座標を指定します。
今回のお絵描きコンテンツは連続した直線を繋げる事で曲線を描いたりしています。
色の変え方
strokeStyleメソッド
strokeStyleは線の色を変更する為に使用するメソッドです。
引数にrgbaの情報を指定します。
サンプルでは色を変更するボタンにdata-roleでrgbaを仕込んでおいて、クリック時にソース内のカラーコード用の変数を上書きしています。
線の太さの変え方
lineWidthメソッド
lineWidthは線の太さを指定する為のメソッドです。
引数には0以上の整数を指定します。
画像のダウンロード
toDataURLメソッド
Canvasに描画されている内容を画像に変換するのにtoDataURLメソッドを使用します。
引数はJPG・PNGのどちらで保存するかで内容を変えます。
JPGの場合：image/jpeg
PNGの場合：image/png
このメソッドの戻り値をダウンロードさせることでCanvasの状態を画像で保存することができます。
また、画像保存の仕様でCanvasの背景色をしていない状態で画像保存をすると以下の様な状態になります。
PNG：背景が透明
JPG：背景が黒
これらの仕様に不都合なければ問題ないですが、今回は見栄えを気にしてCanvasの背景色にfillStyleメソッドで白色に塗りつぶしています。
気になる場合はお好みの背景色を指定してください！
最後に
今回の制作物はPC用にイベントを設定していますが、スマホ用にイベントを書き換えるとアプリにも出来ると思います。
今はハイブリッドアプリを作れるサービスも多くあるので是非改良して面白いものを作ってみてください！
ピックアップ
