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 を見る

関連記事

Javascript let const アロー関数 クラス

Javascript ES5,6 の新機能(letとconst,アロー関数,クラスなど)

ESとはECMASCriptの略で、ECMA という国際的な標準化機関が定めた JavaScript

記事を読む

Javascript ノード の取得や挿入

Javascript ノードの取得や挿入

ノードの取得 ノードの取得(ダイレクトアクセス) document.getElementById

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

Wordpress VR Test

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

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

記事を読む

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

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

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

記事を読む

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラーの状態 WordPress 管理画面のテキスト入力欄で(ビジュアルタブの

記事を読む

html5 javascript

Message

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

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラーの状態 WordPress 管理画面のテキ

wordpress タイトルの変更
WordPress タイトルの変更

テンプレートタグ the_title(); get_the_title

All-in-One WP Migration で サーバ移動
「All-in-One WP Migration」プラグインで 簡単に WordPress のサーバー移行する手順メモ

1.移行元サイトでのデータエクスポート 「All-in-One WP

DNSサーバーとは
ドメインとは?DNSサーバーとは?

ドメインとは? ドメインとは? ドメインとは、インターネット上のネ

javascriptで複数同じ名前のformの値を取得する
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHT

→もっと見る

    • 202403
      Mon Tue Wed Thu Fri Sat Sun
      123
      45678910
      11121314151617
      18192021222324
      25262728293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑