Code d'implémentation de l'animation d'économiseur d'écran Canvas en html5-Tutoriel H5-php.cn

Code d'implémentation de l'animation d'économiseur d'écran Canvas en html5

不言

Libérer： 2018-08-15 09:56:16

original

2568 Les gens l'ont consulté

Le contenu de cet article concerne le code d'implémentation de l'animation d'écran Canvas en HTML5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Sans plus tarder, passons directement au code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body style="height:760px">
    <canvas id="canvas" style="border:0px red solid;display:none">
    </canvas>
    </body>
    </html>

Copier après la connexion

En raison des exigences du projet, l'animation doit afficher des données mises à jour en temps réel, elle est donc différente de l'animation dessin sur toile ordinaire. Mais vous ne pouvez pas dessiner du HTML directement dans le canevas, ne vous inquiétez pas, il existe un moyen.

Pour dessiner du contenu HTML, vous devez d'abord inclure le contenu HTML à l'aide de l'élément <foreignObject>, puis dessiner l'image SVG dans votre canevas.

Pour parler franchement, la seule chose vraiment délicate ici est de créer l'image SVG. Tout ce que vous avez à faire est de créer un SVG contenant une chaîne XML puis de construire un Blob selon les parties suivantes.

Le MIME de l'objet blob doit être "image/svg+xml".
Un élément <svg>.
Un élément <foreignObject> contenu dans un élément SVG.
Le HTML (formaté) enveloppé dans <foreignObject> .

Comme mentionné ci-dessus, en utilisant une URL d'objet, nous pouvons intégrer le code HTML au lieu de le charger à partir d'une source externe. Bien entendu, vous pouvez également utiliser des sources externes à condition que le domaine soit le même que celui du document original (et non sur tous les domaines).

　　//创建画布
    var Cans=document.getElementById("canvas");    
    var ctx=Cans.getContext("2d");    //设置全屏画布
    Cans.width=document.body.offsetWidth;
    Cans.height=document.body.offsetHeight;    
    var DOMURL,img,svg,url;
    initimg("AAA");//默认显示数据，一下代码参考https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas
    function initimg(data) {        
    var data = '<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52">' +
            '<foreignObject width="100%" height="100%">' +
            '<p xmlns="http://www.w3.org/1999/xhtml" style="font-size:12px">' +
            '<p style="width:50px;height:50px;border:1px red solid">' +
            ''+data+'</p>' +
            '</p>' +
            '</foreignObject>' +
            '</svg>';
        DOMURL = window.URL || window.webkitURL || window;
        img = new Image();
        svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
        url = DOMURL.createObjectURL(svg);
        img.src = url;
    }    
    //每隔五秒刷新数据，随机从数组中取（实际情况当然是要从后台获取）
    var getdata = setInterval(function () {        
    var data=["BBB","CCC","DDD","EEE"]
        initimg(data[Math.floor(Math.random()*8)]);
    },5000)

Copier après la connexion

Ce qui suit consiste à contrôler la position d'affichage de l'animation, à déclencher l'animation et à fermer l'animation

var raf;    
var arror = [];    
var running = false;    
//绘制图形
    function createStar() {        
    return {
            x: 0,
            y: 0,
            vx: 0.7,
            vy: 0.7,//用来控制移动速度
            draw: function() {
                ctx.drawImage(img, this.x, this.y);
                DOMURL.revokeObjectURL(url);
            }
        }
    }    
    //清除
    function clear() {
        ctx.fillStyle = 'rgba(255,255,255,1)';
        ctx.fillRect(0,0,canvas.width,canvas.height);
    }    
    //判断图形坐标是否超出画布范围
    function draw() {
        clear();
        arror.forEach(function(ball, i){
            ball.draw();
            ball.x += ball.vx;
            ball.y += ball.vy;            
            if (ball.y + ball.vy+50 > canvas.height || ball.y + ball.vy < 0) {
                ball.vy = -ball.vy;
            }            
            if (ball.x + ball.vx+50 > canvas.width || ball.x + ball.vx < 0) {
                ball.vx = -ball.vx;
            }
        });
        raf = window.requestAnimationFrame(draw);
    }
    
    canvas.addEventListener('click',function (e) {
        event.preventDefault();
        window.cancelAnimationFrame(raf);            if(!running){
                Cans.style.display="none"
                document.onmousemove = document.onkeydown = document.onclick = null;
                clearTimeout(timer);
                clearInterval(getdata);
                clear();
            }else{
                running = false;
                bindevent(1);
            }
    })    
    function loadpi() {        
    if (!running) {
            raf = window.requestAnimationFrame(draw);
            running = true;
        }        var ball;
        ball = createStar();
        ball.x = canvas.width/2-25;
        ball.y = canvas.height/2-25;        
        arror.push(ball);
        document.onmousemove = document.onkeydown = document.onclick = null;
        clearTimeout(timer);
    }    
    var timer;    
    function bindevent(it) {
        clearTimeout(timer);
        timer = setTimeout(function () {            
        if(it==1){
                raf = window.requestAnimationFrame(draw);
                running = true;
            }else{
                Cans.style.display="block"
                loadpi();
            }
        }, 3000);
    }
    window.onload = document.onmousemove = document.onkeydown = document.onclick = function () {
        bindevent();
    }

Copier après la connexion

Recommandations associées :

Basées sur HTML5 Canvas et animation de rebond Chargement des effets spéciaux d'animation

Utilisez le canevas H5 pour créer des animations d'horreur

Canvas et JS pour implémenter des animations dynamiques animation d'horloge

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!