1: HTML of structure----balls.html
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title></title>6 <Linkhref= "Style.css"rel= "stylesheet"type= "Text/css"/>7 <Scripttype= "Text/javascript"src= "Main.js"></Script>8 </Head>9 <Body>Ten <DivID= "Container"> One <CanvasID= "Canvas"></Canvas> A <DivID= "Controller"> - <H2>Canvas controls</H2> - <ahref= "javascript:void (0);"ID= "Motion"></a> the <ahref= "javascript:void (0);"ID= "White">White</a> - <ahref= "javascript:void (0);"ID= "BLACK">Black</a> - </Div> - + </Div> - + </Body> A </HTML>
2: CSS of Style-----style.css
1 #container {2 width:800px;3 height:600px;4 margin:10px Auto;5 position:relative;6 }7 #canvas {8 Display:block;9 border:1px solid #808080;Ten margin:10px Auto; One } A h2{ - Text-align:center; - } the #controller { - border-radius:20px; - border:1px solid Grey; - width:200px; + height:100px; - Position:absolute; + top:10px; A left:10px; at } - #controller a{ - background: #808080; - color: #ffffff; - Text-decoration:none; - line-height:35px; in Text-align:center; - Position:absolute; to Display:block; + width:50px; - height:35px; the border:1px solid #808080; * border-radius:20px; $ }Panax Notoginseng #motion { - top:55px; the left:10px; + } A #white { the top:55px; + left:70px; - } $ #black { $ top:55px; - left:130px; -}
3: JavaScript of behavior----main.js
/** * Created by Jackpan on 2015/4/18. */var canvas;var context;var width;var height;var balls=[];var IsMove=true;var Motion;var White;var black;var themecolor;window.onload= function () {Canvas=document.getelementbyid ("canvas"); Motion=document.getelementbyid ("Motion"); White=document.getelementbyid ("white"); Black=document.getelementbyid ("Black"); Motion.innerhtml= "movement"; Context=canvas.getcontext ("2d"); canvas.width=800; canvas.height=600; Width=canvas.width; Height=canvas.height; context.globalalpha=0.7; for (Var i=0;i< -; i++) {var R=math.floor (Math.random () *255); var G=math.floor (Math.random () *255); var B=math.floor (Math.random () *255); var radius=math.random () *40+10; var ball={ x:math.random () * (Width-2*radius) +radius, Y:math.random () * (Height-2*radius) +radius, Vx:Math.pow (- 1,math.ceil (Math.random ())) *math.random () *8+2, Vy:Math.pow ( -1,math.ceil (Math.random ())) *math.random () *4+2, Radius:radius, Color: "RGB (" +r+ "," +g+ "," +b+ ")"} Balls[i]=ball; } Motion.onclick= function() {if (ismove) {Ismove=false; Motion.innertext= "Stationary"; }else{Ismove=true; motion.innerhtml= "movement"; }} White.onclick= function() {ThemeColor= "White"; } Black.onclick= function() {ThemeColor= "BLACK"; } setinterval (function () {drawball (); if (ismove) {updateball (); }},40)}function Drawball () {context.clearrect (0,0,width,height); if (ThemeColor= = "Black") { Context.fillstyle=themecolor; Context.fillrect (0,0,width,height); } for (Var i=0;i<balls.length;i++) { context.globalcompositeoperation= "Lighter"; Context.beginpath (); Context.arc (balls[i].x,balls[i].y,balls[i].radius,0,math.pi*2,true); Context.closepath (); Context.fillstyle=balls[i].color; Context.fill (); }}function Updateball () {for (var i=0;i<balls.length;i++) { var aball=balls[i]; aball.x+=ABALL.VX; aball.y+=aball.vy; if (Aball.x<aball.radius | | aball.x>Width-aball.radius) {ABALL.VX=-ABALL.VX; } if (Aball.y<Aball. Radius | | aball.y>Height-aball.radius) {Aball.vy=-aball.vy; } }}
4: Effect static diagram display
Random motion of small demo ball of H5 Canvas
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
