html5中Canvas屏保动画的实现代码

nbsp;html&gt;    <meta>    <title>Title</title>            <canvas>    </canvas>        

//创建画布    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>' +            '<foreignobject>' +            '<p>' +            '</p><p>' +            ''+data+'</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 &gt; canvas.height || ball.y + ball.vy  canvas.width || ball.x + ball.vx <p>