canvas タグでお絵描き(レスポンシブ)

公開日: : html5, javascript

canvas タグでお絵描き(レスポンシブ)

簡単なメモ張みたいなものが欲しいので作ってみました。
canvas のレスポンシブが少しひっかかったので、メモしておこうと思います。

canvas レスポンシブの幅・高さを調整する

canvas タグの基本

canvas は、2D グラフィックスを描く HTML5 からのタグ。

<canvas id="ID名" width="幅" height="高さ">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>

属性は、幅・高さとグローバル属性(classなども)指定出来ます。

var canvas = document.getElementById('ID名');

Javascript では、このようにキャンバスを取得します。

canvas の幅と高さを CSS で指定する

CSS からでも幅・高さの指定は可能です。

<style>
#canvas{
   width: 80%;
   height: 70vh;
}
</style>
.....(省略)......
<canvas id="canvas"></canvas>

今回は可変にしたいので、パーセントで指定。

// canvas の幅と高さの指定
var canvas = document.getElementById('canvas');
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

その場合は、Javascript の方で width と height を指定します。

canvas の背景色を塗りつぶす

描画には Javascript で、コンテキストを取得します。

// canvas を白で塗りつぶす
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.clientWidth, canvas.clientHeight);

fillRect()は塗りつぶしのメソッドで、引数は(座標X, 座標Y, 幅, 高さ)です。

canvas で線を描く

canvas タグ で線を描くには座標を使います。

var context = canvas.getContext('2d');
context.beginPath();//パスのリセット
context.moveTo(座標X, 座標Y);//線の開始座標
context.lineTo(座標X, 座標Y);//線の終了座標
context.stroke();//線の表示
context.closePath();//パスを閉じる

あとは、マウスイベントでこの線を描いていけば、お絵かきっぽくなります。
参考サイト
DEMO を見る

canvas レスポンシブで線がずれる

canvasの位置・大きさを取得

マウスイベントはウィンドウの左上端からの座標です。
canvas 幅が 80% なので、そこに線を描くとずれています。

// canvasの位置・大きさを取得
var clientRect = canvas.getBoundingClientRect();
var canvas_x = clientRect.left;
var canvas_y = clientRect.top;

座標を取得して、引いて調整。

// マウスダウンイベント内
startX=e.pageX-canvas_x;
startY=e.pageY-canvas_y;
・・・・・・・・・
// マウスムーブイベント内
if(mousedown)draw(e.pageX-canvas_x,e.pageY-canvas_y);

canvas がレスポンシブで劣化する

ウィンドウリサイズ時、絵が伸縮してしまうため、キャンバスの大きさも指定しなおしました。

//ウィンドウリサイズ時
window.addEventListener('resize', function (event) {
	// canvasの位置座標を取得(描いたものを伸縮させないため、キャンバスの大きさを変える)
	clientRect = canvas.getBoundingClientRect();
	canvas_x = clientRect.left;
	canvas_y = clientRect.top;
	canvas.width = canvas.clientWidth;
	canvas.height = canvas.clientHeight;
});

しかし、描画後に width・height を指定しなおすと、消えてしまいます。

線を描き終わるたびに、canvas データーを保存しておき、ウィンドウリサイズ時に、描画しなおすことにしました。

canvas データーを保存する

ctx.getImageData(座標X,座標Y,幅,高さ);

canvas 保存したデータを描画する

ctx.putImageData(データ, 座標X, 座標Y);

ここまでのお絵かき部分はこんな感じです。
DEMO を見る
スマホで縦線を描くと、スクロールしてしまうみたいで(多分ウィンドウがリサイズしてガタガタしている)描画が消えてしまうので、CSSでスクロールしないようにしたら治りました。

// スクロールしないようにする
html,body{
overflow: hidden;
}

canvas を画像にして、保存する(ダウンロード)

あと消すボタンと、保存ボタンを付けようと思います。

canvas を消す(クリア)する

ctx.clearRect(座標X,座標Y,幅,高さ);

今回はこのメソッドは使わず、背景白なので、fillRect()で塗りつぶしにしました。

canvas をJPEG 画像に変換する

var base64 = canvas.toDataURL('image/jpeg');

この辺りからは難しいので、参考サイトをまんま使わせてもらいます。

canvas をダウンロードさせる

// カンマで分割し、base64データの文字列をデコード
var tmp = base64.split(',');
var data = atob(tmp[1]);
// tmp[0]の文字列(data:image/png;base64)からコンテンツタイプ(image/png)部分を取得
var mime = tmp[0].split(':')[1].split(';')[0];
//  1文字ごとにUTF-16コードを表す 0から65535 の整数を取得
var buf = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) buf[i] = data.charCodeAt(i);
// blobデータを作成
var blob = new Blob([buf], { type: mime });
saveBlob(blob, 'memo.jpg');

完成デモはこちら。
DEMO を見る

関連記事

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具体的には、スマホで最近よく見か

記事を読む

画像加工 cropbox.js

写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる

Git Hub の cropbox 写真をアップロードしてカット出来るjQueryのプラグイン c

記事を読む

SVGとは?

SVGとは? SVG(Scalable Vector Graphics)は、XMLをベースとした、

記事を読む

Wordpress VR Test

WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる WordPress.com内で、VR(

記事を読む

JavaScript 規制標識 タイピングゲーム(自分用・激ムズ)

HTML5 audio タグ を使って音声を出す

HTML5からaudioタグを使えば、Flashなどのプラグインを使わなくてもブラウザ上で音声を再生

記事を読む

JavaScript タイピングゲーム スマホ用

Javascript タイピング ゲーム スマホ用 をつくる

JavaScript スマホ用 切り替え 前回の記事のゲームですが、スマホだとサイズが合わなくてや

記事を読む

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる

記事を読む

背景を SVG で全面表示し、パターン化をアニメーションさせる

背景を SVG で全面表示し、パターン化をアニメーションさせる

SVGでウィンドウに全面表示させた空に、シャボン玉が飛んでいるような表現をしてみようと思います。

記事を読む

画像の拡大・縮小 タッチイベント

画像の拡大縮小を javascript の touch イベントでやってみる

画像の幅と高さを取得 まずは、neko.jpg という画像を用意して、幅と高さを取得します。

記事を読む

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR

記事を読む

html5 javascript

Message

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

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)
WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具

canvas タグでお絵描き(レスポンシブ)
canvas タグでお絵描き(レスポンシブ)

簡単なメモ張みたいなものが欲しいので作ってみました。 canvas

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)
フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

ビューポートの単位 vw, vh, vmin, vmax CSS で

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その2

前回の続きです。 次のスターターコンテンツは、今回のシンプルテン

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その1

WordPress の最低限の機能だけのシンプルなテンプレートが欲しか

→もっと見る

    • 201905
      Mon Tue Wed Thu Fri Sat Sun
      12345
      6789101112
      13141516171819
      20212223242526
      2728293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑