呼吸灯-html&canvas

最新推荐文章于 2024-03-09 13:58:53 发布

雪狼MJ

最新推荐文章于 2024-03-09 13:58:53 发布

阅读量3.5k

点赞数 2

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/tonybest985/article/details/45644253

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在学习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();
}

//检测是否支持canvas
function 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();

}

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

雪狼MJ

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
呼吸灯-html&canvas

在学习html的canvas，做到一个效果，感觉如果有点类似于呼吸灯，于是做个记录。先是html文档：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/modernizr.js" type="text/javascri
复制链接

扫一扫