Canvas 2Dで色々

このページについて

このページではHTML5で導入されたCanvas 2Dで色々と遊んでみた結果を公開している。

2016年2月4日

Canvas 2Dで折れ線グラフ
Canvas 2Dの結果をimg要素に表示
Canvas 2Dでアナログ時計

Canvas 2Dで折れ線グラフ

Canvas 2Dで折れ線グラフを書く意味があるとすれば、動的に変化するデータを扱う場合だろうか。当然だが、普通のグラフを書くだけならば、既存のグラフ描画の可能なソフトウェアを使った方が楽である。ここで示す例は、まあ、頑張れば色々とできると思うよ、というあれである。

JavaScriptのコード

//コンテキストの取得
var context=document.getElementById("c1").getContext('2d');

//X軸の描画
context.beginPath();
context.moveTo(35,260);
context.lineTo(500,260);
context.stroke();

//Y軸の描画
context.beginPath();
context.moveTo(35,260);
context.lineTo(35,0);
context.stroke();

//データ
var data=[100,20,80,80,30];

var max=0;
for(var i=0;i<data.length;i++){
	while(max<=data[i])max+=10;
}

//グラフの描画
context.beginPath();
context.moveTo(35,260-data[0]/max*250);
for(var i=1;i<data.length;i++){
	context.lineTo(35+465*i/(data.length-1),260-data[i]/max*250);
}
context.stroke();


//目盛りの描画
context.textAlign="center";
context.fillText(0,40,270);
for(var i=1;i<data.length;i++){
	context.fillText(i,40+455*i/(data.length-1),270);
}

var div=0;
while(div<=max){
	context.fillText(div,25,260-div/max*250);
	div+=10;
}


//テキストの描画
context.textBaseline="top";
context.fillText("X軸",250,280);
context.fillText("図1 折れ線グラフ",250,290);

context.translate(10,130);
context.rotate(Math.PI / 2);
context.fillText("Y軸",0,0);

表示結果

Canvas 2Dの結果をimg要素に表示

関数toDataURLを用いることで、Canvas 2Dで生成した画像のURLを取得することができる。引数に形式 ("image/png"や"image/jpeg"など) を指定することで、その形式の画像を取得できる。img要素のsrc属性にそのURLを指定すればimg要素として表示することも可能ということである。そんなことをする意味があるかどうかは知らない。

JavaScriptのコード

//canvasに円を描画
var canvas=document.getElementById("c2");
var context=canvas.getContext('2d');
context.fillStyle="rgb(192,80,77)";
context.beginPath();
context.arc(50,50,30,0,2*Math.PI,true);
context.fill();

//img要素に表示
document.getElementById("img_png").src=canvas.toDataURL("image/png");
document.getElementById("img_jpg").src=canvas.toDataURL("image/jpeg");

canvas要素

"image/png"形式で出力

"image/jpeg"形式で出力

出力する形式によっては予想と違う結果になることもあるため注意しよう。

Canvas 2Dでアナログ時計

昔、Flashでアナログ時計を作ったことがあったが、Canvas 2Dでも当然ながら可能だった。意味があるかどうかは知らないが、ウェブサイトの飾りくらいにはなるかもしれない。

Dateで現在時刻を取得し、また、setInterval関数で1秒おきに外見を更新している。canvas要素の大きさに応じて描画の仕方も変更している。

JavaScriptのコード

//canvasに円を描画
var canvas=document.getElementById("c2");
var context=canvas.getContext('2d');
context.fillStyle="rgb(192,80,77)";
context.beginPath();
context.arc(50,50,30,0,2*Math.PI,true);
context.fill();

//img要素に表示
document.getElementById("img_png").src=canvas.toDataURL("image/png");
document.getElementById("img_jpg").src=canvas.toDataURL("image/jpeg");
})();

//アナログ時計
(function(){
//canvas要素とそのコンテキストの取得
var canvas=document.getElementById("c3");
var context=canvas.getContext("2d");

//ディジタル時計もついでに表示
var digitalClock=document.getElementById("digitalClock");

//canvasの中心
var center={x:canvas.width/2,y:canvas.height/2};
//時計の半径
var radius=canvas.width/2;

//1秒ごとに現在時刻を取得し、アナログ時計を描画
setInterval(function(){
	//現在時刻の取得
	var now=new Date();
	
	//canvasのクリア
	context.clearRect(0,0,center.x*2,center.y*2);

	//円
	context.beginPath();
	context.fillStyle="silver";
	context.arc(center.x,center.y,radius,0,Math.PI*2,false);
	context.fill();
	
	//秒針
	context.beginPath();
	context.translate(center.x,center.y);
	var sRadians=now.getSeconds()/30*Math.PI+Math.PI;
	context.rotate(sRadians);
	context.lineWidth=2;
	context.moveTo(0,0);
	context.lineTo(0,radius);
	context.strokeStyle="aqua";
	context.stroke();
	context.rotate(-sRadians);
	
	//長針
	context.beginPath();
	var mRadians=(now.getMinutes()/30+1+now.getSeconds()/1800)*Math.PI;
	context.rotate(mRadians);
	context.lineWidth=3;
	context.moveTo(0,0);
	context.lineTo(0,radius*2/3);
	context.strokeStyle="blue";
	context.stroke();
	context.rotate(-mRadians);
	
	//短針
	context.beginPath();
	var hRadians=(now.getHours()/6+1+now.getMinutes()/360)*Math.PI;
	context.rotate(hRadians);
	context.lineWidth=4;
	context.moveTo(0,0);
	context.lineTo(0,radius*1/3);
	context.strokeStyle="navy";
	context.stroke();
	context.rotate(-hRadians);
		
	context.translate(-center.x,-center.y);
	
	//円
	context.beginPath();
	context.fillStyle="gold";
	context.arc(center.x,center.y,radius/10,0,Math.PI*2,false);
	context.fill();
	
	//ディジタル時計の内容の更新
	digitalClock.firstChild.nodeValue=now.getHours()+"時"+now.getMinutes()+"分"+now.getSeconds()+"秒";
},1000);

表示結果

-時-分-秒