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