日別アーカイブ: 2018-03-26

『春を行く』良寛の詩に添えて

ものづくり筆耕ブログ

良寛禅師の漢詩

　

またまた、旅立つ若者へのはなむけの言葉を贈ります。良寛禅師の漢詩から『行春』を開始画面に表示しました。ドドーンと花火を上げてお祝い申し上げます。

はなむけの言葉







 

動作コード

<html>
<body onLoad="ctx.drawImage(img0, 52, 0, 397, 460);setTimeout('test()', 5000);">
<canvas id="sample" width="500" height="460" style="background-color:mediumblue; border:0px green solid;"></canvas>
<audio id="dodoooon" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/01/se-039ac.mp3"></audio>
</body>
<script type="text/javascript">
const X0 = 20;
const X1 = 0;
var img0 = new Image();									//新規画像オブジェクト,ロードする
img0.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/04/45fc2e10896580ca2a9af33c50b6f9c2.png";//ヘッダー画像, 727x843
var img1 = new Image();									//新規画像オブジェクト,ロードする
img1.src = "https://aidesign.lolipop.jp/wp-content/uploads/2018/03/Hanabi4.png";	//花火を打ち上げる画像, 500x460

var count = ctx = 0;
var canvas = document.getElementById('sample');			//描画コンテキストの取得
if (canvas.getContext)	ctx = canvas.getContext('2d');
else					alert("not support canvas!");

function test() {
	if(++count == 50)	document.getElementById('dodoooon').play();
	ctx.beginPath();
	ctx.globalCompositeOperation = "source-over";		//合成の形式を指定する
	ctx.drawImage(img1, X1, 0);							//描画内容を指定 ■■■　destination-in　■■■
	if(count < 300){
		ctx.globalCompositeOperation = "destination-in";//合成の形式を指定する
		ctx.fillStyle = "navy";							//青い円を描く
		ctx.arc(X1+240, 288, count+X0, 0, Math.PI*2, true);
		setTimeout('test()', 30);
	}
	else{
		ctx.fillStyle = "yellow";
		ctx.font = "24px 'ＭＳ ゴシック'";
		ctx.fillText("祝", 5, 25);
		ctx.fillText("旅立ち", 428, 25);
		ctx.fillStyle = "darkgreen";
		ctx.fillText("2018-03-26", 5, 455);
		ctx.fillText("\xA9TacM,2018 Ver0.01", 280, 455);
	}
	ctx.fill();
}
</script>
</html>