Implementation code for Canvas screensaver animations in HTML5

This article gives you the content is about HTML5 in the canvas screensaver animation implementation code, there is a certain reference value, the need for a friend can refer to, I hope you have some help.

Not much to say directly on the code

<! DOCTYPE html>
Because of the project requirements, the animation needs to display the data immediately updated, so it is not the same as the normal canvas. But you can not directly put HTML into the canvas, don't worry there is a way.

To draw the HTML content, you first <foreignObject> include the HTML content with the element, and then draw the SVG image into your canvas.

To exaggerate, the only real tricky thing here is to create an SVG image. All you need to do is create an SVG that contains an XML string, and then construct one based on the following sections Blob .


 

 
  
 
   
The MIME of the Blob object should be "Image/svg+xml".
 
   
An <svg> element.
 
   
The element that is contained in the SVG element <foreignObject> .
 
   
Wrapped <foreignObject> in (formatted) HTML.
 
  

 
As mentioned above, by using an object URL, we can inline HTML instead of loading it from an external source. Of course, you can also use an external source as long as the domain is the same as the original document (not across domains).

　　Create canvas var Cans=document.getelementbyid ("Canvas");    var Ctx=cans.getcontext ("2d");    Set full screen canvas cans.width=document.body.offsetwidth;        Cans.height=document.body.offsetheight;    var Domurl,img,svg,url; Initimg ("AAA");//display data by default, code reference 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= ' "" Hei Ght= "> ' + ' <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; }//Refresh the data every five seconds, randomly from the array (the actual situation is, of course, to get from the background) var GetData = setinterval (function () {var data=["BBB", "CCC", "DD    D "," EEE "] initimg (Data[math.floor (Math.random () *8)); },5000)
 Here's how to control where animations are displayed and trigger animations and turn off animations 
 

var RAF;    var arror = [];    var running = false;  Draw graphics function Createstar () {return {x:0, y:0, vx:0.7, VY:                0.7,//is used to control movement speed Draw:function () {Ctx.drawimage (img, this.x, THIS.Y);            Domurl.revokeobjecturl (URL);        }}}//Clear function Clear () {Ctx.fillstyle = ' Rgba (255,255,255,1) ';    Ctx.fillrect (0,0,canvas.width,canvas.height);        }//Determine if the graphics coordinates are outside the canvas range 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 (); }