呼吸灯-html&canvas

来源：互联网发布：知乎评价李白的诗编辑：程序博客网时间：2024/04/28 08:07

在学习html的canvas，做到一个效果，感觉如果有点类似于呼吸灯，于是做个记录。
先是html文档：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <script src="js/modernizr.js" type="text/javascript" charset="utf-8"></script>        <script src="js/image.js" type="text/javascript" charset="utf-8"></script>    </head>    <body>        <canvas id="canvasOne" width="640" height="500">            You browser does not support HTML5 Canvas        </canvas>    </body></html>

然后js控制：

window.addEventListener("load", eventWindowLoaded, false);function eventWindowLoaded(){    canvasApp();}//检测是否支持canvasfunction canvasSupport(){    return Modernizr.canvas;}function canvasApp(){    if(!canvasSupport()){        return;    }    var canvas = document.getElementById('canvasOne');    var context = canvas.getContext('2d');    function drawScreen(){         //背景        context.globalAlpha = 1;        context.fillStyle = "#ffffaa";        context.fillRect(0, 0, 640, 480);        //图像        context.globalAlpha = alpha;        context.drawImage(hellowimage, 0, 0);        if(fadeIn){            alpha += .01;            if(alpha >= 1){                alpha = 1;                fadeIn = false;            }        }else{            alpha -= .01;            if(alpha < 0){                alpha = 0;                fadeIn = true;            }        }         //text        context.font = "72px Sans-Serif";        context.textBaseline = "top";        context.globalAlpha = alpha;        context.fillStyle = "#000000";        context.fillText(showtext, 150, 200);    }    var showtext = "hello world";    var alpha = 0;    var fadeIn = true;    var hellowimage = new Image();    hellowimage.src = "img/1.jpg";    function gameLoop(){        window.setTimeout(gameLoop, 20);        drawScreen();    }    gameLoop();}

心得：其实这里是调整透视的大小来控制呼吸的效果的

0 0