html5中Canvas屏保動畫的實現代碼

最後更新：2018-08-15 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本篇文章給大家帶來的內容是關於html5中Canvas屏保動畫的實現代碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

話不多說直接上代碼

<!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>

因為項目需求，該動畫中需要顯示即時更新的資料，所以和普通的canvas畫出來的不一樣。但是又不能直接把html畫到canvas中去，別著急有辦法。

為了繪製 HTML 內容，你要先用<foreignObject> 元素包含 HTML 內容，然後再將這個 SVG 映像繪製到你的 canvas 中。

誇張地說，這裡唯一真正棘手的事情就是建立 SVG 映像。您需要做的所有事情是建立一個包含XML 字串的 SVG，然後根據下面的幾部分構造一個 Blob。

blob 對象的 MIME 應為 "image/svg+xml"。
一個 <svg> 元素。
在 SVG 元素中包含的 <foreignObject> 元素。
包裹到 <foreignObject> 中的(格式化好的) HTML。

如上所述，通過使用一個 object URL，我們可以內聯 HTML 而不是從外部源載入它。當然，只要域與原始文檔相同（不跨域），您也可以使用外部源。

　　//建立畫布    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)

以下便是控制動畫的顯示位置和觸發動畫及關閉動畫

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More