People who have used canvas know that you can make a variety of animations on this canvas, and that's probably all used.
A demo of the sun just made with this:
Now draw a circle to see:
Demo.js:
var can,ctx,count = 1= document.getElementById (' can '= Can.getcontext (' 2d '= = Document.body.scrollheight;can.setattribute (' width ', W) can.setattribute (' height ', h) //Angle for = MATH.PI/2 * count; x = W/2 + math.sin (angle); y = h/2 + math.sin (angle); Ctx.beginpath (); Ctx.arc (x, y, H/6,0,2*math.pi); Ctx.fillstyle = ' #3ff '; = ' #333 '; Ctx.stroke (); Ctx.fill ();
The corresponding. HTML:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title>Demo</title> </Head> <BodyBgColor= ' #000 '> <CanvasID= "Can"></Canvas> <Scriptsrc= "Js/demo.js"></Script> </Body></HTML>
This is too monotonous, we can angle this piece of code to cycle, to see what the demo is the effect?
Demo.js:
for (i = 0; I <count;i++) { = math.random (MATH.PI/2 * i); x = (W/3) *math.sin (angle); y = H/3 + (1 + angle) *math.sin (angle); Ctx.beginpath (); Ctx.arc (2*x,y,h/8,0,2*math.pi); Ctx.fillstyle = ' #3ff '; = ' #000 '; Ctx.stroke (); Ctx.fill ();}Do not want to be so monotonous level, can also have radian:
What to do with it (God horse) can be! -/-
Use canvas to draw all kinds of things
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
