Implementation code for Canvas screensaver animations in HTML5

Source: Internet
Author: User
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 .

    1. The MIME of the Blob object should be "Image/svg+xml".

    2. An <svg> element.

    3. The element that is contained in the SVG element <foreignObject> .

    4. 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 (); }
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.