suchen

Heim  >  Artikel  >  Web-Frontend  >  Implementierungscode der Canvas-Bildschirmschoner-Animation in HTML5

Implementierungscode der Canvas-Bildschirmschoner-Animation in HTML5

不言
不言Original
2018-08-15 09:56:162600Durchsuche

Der Inhalt dieses Artikels befasst sich mit dem Implementierungscode der Canvas-Bildschirmschoneranimation in HTML5. Er hat einen gewissen Referenzwert. Ich hoffe, er wird für Sie hilfreich sein.

Kommen wir ohne Umschweife direkt zum 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>

Aufgrund der Projektanforderungen muss die Animation in Echtzeit aktualisierte Daten anzeigen, sodass sie sich von der normalen Leinwand unterscheidet Zeichnung. Aber Sie können HTML nicht direkt in Canvas zeichnen, keine Sorge, es gibt einen Weg.

Um HTML-Inhalte zu zeichnen, müssen Sie zunächst den HTML-Inhalt mit dem <foreignObject>-Element einbinden und dann das SVG-Bild in Ihre Leinwand zeichnen.

Um es ganz klar auszudrücken: Das einzig wirklich Knifflige hier ist die Erstellung des SVG-Bildes. Sie müssen lediglich eine SVG-Datei erstellen, die eine XML-Zeichenfolge enthält, und dann ein Blob gemäß den folgenden Teilen erstellen.

  1. Der MIME des Blob-Objekts sollte „image/svg+xml“ sein.

  2. Ein <svg> Element.

  3. Ein <foreignObject>-Element, das in einem SVG-Element enthalten ist.

  4. Der (formatierte) HTML-Code, eingeschlossen in <foreignObject> .

Wie oben erwähnt, können wir durch die Verwendung einer Objekt-URL den HTML-Code einbinden, anstatt ihn von einer externen Quelle zu laden. Natürlich können Sie auch externe Quellen nutzen, sofern die Domain mit dem Originaldokument übereinstimmt (nicht domainübergreifend). 

　　//创建画布
    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)

Im Folgenden wird die Anzeigeposition der Animation gesteuert, Animationen ausgelöst und Animationen geschlossen

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

Verwandte Empfehlungen:

Laden von Animationen basierend auf HTML5 Canvas und Rebound-Animation Spezialeffekte

Verwendung von H5-Canvas zur Erstellung von Horroranimationen

Canvas und JS zur Implementierung dynamischer Uhranimationen

Das obige ist der detaillierte Inhalt vonImplementierungscode der Canvas-Bildschirmschoner-Animation in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was sind die neuen Strukturelemente in HTML5? Verwendung neuer Strukturelemente in HTML5 (empfohlen)Nächster Artikel：Was sind die neuen Strukturelemente in HTML5? Verwendung neuer Strukturelemente in HTML5 (empfohlen)

In Verbindung stehende Artikel

Mehr sehen