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ページをアプリっぽくする(サービスワーカーでホーム画面に追加)

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

SVGとは?

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

記事を読む

画像加工 cropbox.js

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

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

記事を読む

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

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

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

記事を読む

HTML5 とは?

HTML5とは? HTML5は、標準化団体のW3C(World Wide Web Consorti

記事を読む

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

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

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

記事を読む

Wordpress VR Test

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

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

記事を読む

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

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

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

記事を読む

html5 javascript

Message

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

CodeIgniter インストール
Codeigniter インストールとバージョンアップ2→3 PHP 5→7 メモ

Codeigniter インストール Codeigniter をサイ

wordpress カスタム投稿を一覧(ループ)で表示する
wordpress カスタム投稿を一覧(ループ)で表示する

カスタム投稿を一覧で表示する方法がいろいろあります。 query_p

wordpress カスタム投稿で 2ページ目以降が404
wordpress カスタム投稿で 2ページ目以降が404になってしまう

wordpress のカスタム投稿で、ニュースのページを作っていました

ロリポップでWordPressのPHPバージョンを5から7にする
ロリポップでWordPressのPHPバージョン7.1に変更後「サイトに技術的な問題が発生しています。」

WordPress.org の推奨環境 PHP7以上 MyS

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

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

→もっと見る

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