<canvas width="980" height="446"> </canvas>
//addEventlistener および attachEvent かを 判断(関数addListener)==作成 function addListener(element, event, listener) { //addEventlistener(InternetExplorer以外)の処理 if (element.addEventListener) { element.addEventListener(event, listener, false); //attachEvent(InternetExplorer および其の)処理 } else if (element.attachEvent) { element.attachEvent('on' + event, listener); } else { //どちらも 扱えない 場合の 処理 throw new Error('イベントリスナに未対応です。'); } }; //addListener(window, 'load', init); //読み込み 完了時の 初期動作addListener 関数 addListener(window, 'load', move); //init()関数 function init() { // var element = document.getElementById("move"); //calendar の 範囲 style.backgroundColor="red" 赤色表記(確認用) return element.style.backgroundColor = #000000; }; //自動スクロール および 遷移(矢印)を 関数 move で実行 function move() { var Timer00 = null; var w = 0; var Timer = null; var countup = 0; var canvasobj = document.getElementsByTagName("canvas")[0]; var context = canvasobj.getContext("2d"); var myImage = new Image(); myImage.src = "../javaimg/124.png"; while (w <= 3) { myImage.onload = function () { context.drawImage(this, 0, 0, 920, 440); Timer = setInterval(img, 1000); countup++; if (countup == 1) { myImage.src = "../javaimg/124.png"; myImage.onload = function () { var count = 1.0; context.drawImage(this, 0, 0, 920, 440); Timer00 = setTimeout(alpha, 100); //Timer00 = setTimeout(function () { alpha(count); }, 100); //Timer00 = null; function alpha() { myImage.src = "../javaimg/124.png"; myImage.onload = function () { if (count > 0.0) { context.globalAlpha = count; context.save(); //context.globalCompositeOperation = "lighter"; count = count - 0.2; context.drawImage(this, 0, 0, 920, 440); } else { //Timer00 = clearInterval(Timer00);] Timer00 = null; } } } } } if (countup == 3) { myImage.src = "../javaimg/logo.png"; myImage.onload = function () { context.drawImage(this, 0, 0, 920, 440); } } else if (countup == 6) { myImage.src = "../javaimg/56.png"; myImage.onload = function () { context.drawImage(this, 0, 0, 920, 440); } } else if (countup == 9) { myImage.src = "../javaimg/25.png"; myImage.onload = function () { context.drawImage(this, 0, 0, 920, 440); } } else if (countup == 12) { countup = 0; } } } w++; } };
drawImage()で表示させた画像をsetTimeoutなど で呼び出す毎に描けば(canvasに)FADEOUTが出来るかと、、
全体が不明瞭ではありますがもしよろしければ解説をご検討をお願い申し上げます。。。。。。。。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/22 09:10