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で複数同じ名前のformの値を取得する

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

Javascript で value の値を取得する このようなHTMLフォームがあった場合、

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

Javascript let const アロー関数 クラス

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

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 管理画面のテキスト入力欄で(ビジュアルタブの

記事を読む

画像加工 cropbox.js

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

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

記事を読む

Strict モード JavaScript

Javascript Strictモード “use strict”;

Strict モード(厳格モード) Strict モードとは、ECMAScript5(2009年1

記事を読む

HTML5 とは?

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

記事を読む

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

→もっと見る

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