Canvasの基本
デモ1
ソースコード
<script>
$(function(){
// キャンバスの要素オブジェクトとコンテキストを取得する。
var cvs = $('#canvas1');
var ctx = cvs[0].getContext('2d');
// 描画開始
ctx.beginPath();
// 三角形の情報
ctx.moveTo(100,20);
ctx.lineTo(160,100);
ctx.lineTo(40,100);
ctx.closePath();
// 三角形を描画する
ctx.stroke();
});
</script>
<canvas id="canvas1"></canvas>
文字を描画する
デモ2
ソースコード
<script>
// デモ2 文字を描画する
$(function(){
// キャンバスの要素オブジェクトとコンテキストを取得する。
var cvs = $('#canvas2');
var ctx = cvs[0].getContext('2d');
// 描画開始
ctx.beginPath();
// フォントの設定（例：イタリック 太字 22px MSPゴシック)
ctx.font = "italic bold 22px 'ＭＳ Ｐゴシック'";
// 文字の色を指定
ctx.fillStyle = '#dd4d40';
// 文字を描画
ctx.fillText("hello world! こんにちは", 100, 80);
// 輪郭型の文字描画
ctx.strokeText("hello world! こんにちは", 100, 120);
ctx.stroke();
});
</script>
<canvas id="canvas2" width="400" height="300"></canvas>
背景をクリアする
デモ2
ソースコード
// デモ2
$(function(){
// キャンバスの要素オブジェクトとコンテキストを取得する。
var cvs = $('#canvas2');
var ctx = cvs[0].getContext('2d');
// 描画1
ctx.beginPath();
ctx.moveTo(70,20);
ctx.lineTo(160,100);
ctx.lineTo(40,100);
ctx.lineTo(40,50);
ctx.closePath();
ctx.stroke();
// 描画2→描画1を一度クリアしてから別の図形を描画する。
ctx.beginPath();
ctx.clearRect(0,0,300,400);// canvasの背景をクリアする
ctx.moveTo(70,20);
ctx.lineTo(160,100);
ctx.lineTo(40,100);
ctx.closePath();
ctx.stroke();
});
<canvas id="canvas2"></canvas>
テキストの横幅を取得する
「measureText」メソッドでテキストの横幅を取得することができる。
デモ3
ソースコード
<script>
// デモ3:テキストのサイズを取得する
$(function(){
// キャンバスの要素オブジェクトとコンテキストを取得する。
var cvs = $('#canvas3');
var ctx = cvs[0].getContext('2d');
// 描画開始
ctx.beginPath();
// フォントの設定（例：イタリック 太字 22px MSPゴシック)
ctx.font = "italic bold 22px 'ＭＳ Ｐゴシック'";
// 文字の色を指定
ctx.fillStyle = '#dd4d40';
var text1 = "hello world! こんにちは";
metrics = ctx.measureText(text1);
console.log('テキストの横幅＝' + metrics.width);
// 文字を描画
ctx.fillText(text1, 100, 80);
ctx.strokeText(text1, 100, 120);
ctx.stroke();
});
</script>
<canvas id="canvas3" width="400" height="300"></canvas>
改行を含むテキストを描画する
改行コードを含むテキストを改行しながら描画する。
また、有効幅の概念があり、有効幅を超えた分は自動改行される。
デモ1
$(function(){
// デモ1:改行を含むテキストを描画する
// キャンバスの要素オブジェクトとコンテキストを取得する。
var cvs = $('#canvas1');
var ctx = cvs[0].getContext('2d');
// 描画開始
ctx.beginPath();
// フォントの設定（例：イタリック 太字 22px MSPゴシック)
ctx.font = "italic bold 22px 'ＭＳ Ｐゴシック'";
// 文字の色を指定
ctx.fillStyle = '#dd4d40';
var text1 = "こんにちは。¥n今日の天気はいかがでしょう。¥n晴れです。";
// 改行を含むテキストを出力する
fillTextWithNewLine(ctx,text1,100,80,200);
ctx.stroke();
});
/**
* 改行を含むテキストを出力する
*
* @param ctx Canvasコンテキスト
* @param text 改行を含むテキスト
* @param x 位置X
* @param y 位置Y
* @param width 有効幅 有効幅を超えると改行する
* @param [fontSize] フォントサイズ
* @param [lineSpace] 行間隔(px)
*
*/
function fillTextWithNewLine(ctx,text,x,y,width,fontSize,lineSpace){
// フォントサイズが空なら文字「あ」の横幅をセットする。
if(!fontSize){
var metrics = ctx.measureText('あ');
fontSize = metrics.width;
}
// 行間隔が空ならフォントサイズの50%の幅をセットする。
if(!lineSpace){
lineSpace = fontSize * 0.5;
}
// 行縦幅を算出
var line_height = fontSize + lineSpace;
// テキストを改行で分割する
var lines = splitByNewLine(ctx,text,width)
// 分割したテキストを描画する
for(var i in lines){
var line = lines[i];
y2 = y + (line_height * i);
ctx.fillText(line,x,y2);
}
}
/**
* 有効幅および改行でテキストを分割する。
* @param ctx Canvasコンテキスト
* @param text テキスト
* @param 有効幅
* @return 分割により作成されたテキストの配列
*/
function splitByNewLine(ctx,text,width){
if(!text){
return [];
}
var lines = [];
var line = '';
var last_index = text.length-1;
for (var i = 0; i < text.length; i++) {
var char = text.charAt(i);
if(char == "¥n"){
lines.push(line);
line = '';
}else if(ctx.measureText(line + char).width > width){
if(i < last_index){
lines.push(line);
line = char;
}else{
lines.push(line + char);
}
}else if(i == last_index){
lines.push(line + char);
}else{
line += char;
}
}
return lines;
}
半透明図形を描画
デモ3
ソースコード
<script>
// デモ3
$(function(){
// キャンバスの要素オブジェクトとコンテキストを取得する。
var cvs = $('#canvas3');
var ctx = cvs[0].getContext('2d');
ctx.beginPath(); // 描画開始
// 半透明の円を描く
ctx.globalAlpha = 0.5; // 半透明を指定 0～1 :透明 ～ 不透明
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.arc(100, 80, 50, 0, Math.PI*2, false);
ctx.fill();
ctx.stroke(); // 描画
});
</script>
<canvas id="canvas3"></canvas>
矩形を描画
ソースコード
ctx.globalAlpha = 0.75;
ctx.fillStyle = 'black';
ctx.fillRect(0, 550, 450, 200); // 矩形 x,y,width,height
輪郭のみの矩形を描画する場合
ctx.strokeRect(x, y, width, height); // 輪郭のみの矩形を描画する場合
画像ファイルから描画する
画像ファイルを描画するには、まず画像を事前にプリロードする必要がある。
画像プリロードはImageクラスのonloadメソッドによって行われる。
onloadメソッドは、やや時間を要する処理であるため非同期処理になっている。
よって大量の画像を描画する場合、画像プリロードに時間がかかるので工夫が必要になる。
なお、IMG要素で、すでに画像表示が行われている場合、既に画像プリロード済みになっている。
画像は半透明で描画することが可能である。
デモ1
ソースコード
<script>
// デモ1
$(function(){
// キャンバスの要素オブジェクトとコンテキストを取得する。
var cvs = $('#canvas1');
var ctx = cvs[0].getContext('2d');
// 画像オブジェクトを作成する。（IE対策：日時を付加することによりキャッシュからの読込を防ぐ。）
var img1 = new Image();
img1.src = 'draw_image_file/toumei1.png' + '?' + new Date().getTime();
// 画像プリロード後に画像を描画できる。
img1.onload = function(){
ctx.beginPath();
ctx.drawImage(img1, 100, 80);
ctx.stroke();
}
});
</script>
<canvas id="canvas1" width="400" height="300"></canvas>
半透明の画像を描画する場合
ctx.beginPath();
ctx.globalAlpha = 0.5; // 半透明を指定 0～1 :透明 ～ 不透明
ctx.drawImage(img1, 100, 80);
ctx.stroke();
Canvasを画像ファイルとしてダウンロードする
Canvasで描画されている内容を画像ファイルとしてダウンロードすることができる。
ただし、
FileSaver.jsライブラリを利用している。
サンプル
HTML
<script src="FileSaver.js"></script>
---- Any code ----
<canvas id="canvas1"></canvas>
<input type="button" value="Download" onclick="test1()" />
JavaScript
<script>
// デモ1
$(function(){
// キャンバスの要素オブジェクトとコンテキストを取得する。
var cvs = $('#canvas1');
var ctx = cvs[0].getContext('2d');
// 描画開始
ctx.beginPath();
// 三角形の情報
ctx.moveTo(100,20);
ctx.lineTo(160,100);
ctx.lineTo(40,100);
ctx.closePath();
// 三角形を描画する
ctx.stroke();
});
function test1(){
canvasDownload('#canvas1','test.png');
}
/**
* Canvas画像をダウンロード
* @param canvas_slt キャンバス要素のセレクタ
* @param fn ダウンロードファイル名
*/
function canvasDownload(canvas_slt,fn){
var mime_type='image/png';
var canvas = $(canvas_slt)[0];
var data_url_scheme = canvas.toDataURL(mime_type);// canvasからデータURLスキームを取得する。
// データURLスキームのデータ部分をバイナリデータとして抜き出す。
var bin = atob(data_url_scheme.split(',')[1]);
// 空の Uint8Arrayビューを作る
var buffer = new Uint8Array(bin.length);
// バイナリデータの値をUint8Arrayビューに 1 バイトずつ値を埋めいく。
for (var i = 0; i < bin.length; i++) {
buffer[i] = bin.charCodeAt(i);
}
// Uint8Arrayビューのバッファーを抜き出し、それを元に Blob を作る
var blob = new Blob([buffer.buffer], {type: mime_type});
if(!fn){
fn = "image.png";
}
// FileSaver.jsの機能を利用し、Blob化したデータをファイルダウンロードする。（ここでファイル名を指定できる）
saveAs(
blob
, fn
);
};
</script>
- ホーム
- プログラミングの覚書
- JavaScriptの覚書
- HTML5 | Canvasの覚書