Random motion of small ball in H5 canvas demo, h5canvasdemo ball

Random motion of small ball in H5 canvas demo, h5canvasdemo ball

1: Structure html--balls.html

1 <! DOCTYPE html> 2 
2: Sample css-----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;10     margin:10px auto;11 }12 h2{13     text-align: center;14 }15 #controller{16     border-radius: 20px;17     border: 1px solid grey;18     width: 200px;19     height:100px;20     position: absolute;21     top:10px;22     left:10px;23 }24 #controller a{25     background: #808080;26     color:#ffffff;27     text-decoration: none;28     line-height: 35px;29     text-align: center;30     position: absolute;31     display: block;32     width:50px;33     height:35px;34     border:1px solid #808080;35     border-radius: 20px;36 }37 #motion{38     top:55px;39     left:10px;40 }41 #white{42     top:55px;43     left:70px;44 }45 #black{46     top:55px;47     left:130px;48 }
 
3: javascript For behavior ---- main. js
/*** Created by jackpan on 2015/4/18. */var canvas; var context; var width; var height; var bils = []; 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 = "motion"; 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 <50; 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 () * 2) * Math. random () * 8 + 2, vy: Math. pow (-1, Math. ceil (Math. random () * 2) * Math. random () * 4 + 2, radius: radius, color: "rgb (" + R + "," + G + "," + B + ") "} bils [I] = ball;} motion. onclick = function () {if (isMove) {isMove = false; motion. innerText = "static";} else {isMove = true; motion. innerHTML = "Sports" ;}} 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 <bils. length; I ++) {context. globalCompositeOperation = "lighter"; context. beginPath (); context. arc (bils [I]. x, bils [I]. y, bils [I]. radius, 0, Math. PI * 2, true); context. closePath (); context. fillStyle = bils [I]. color; context. fill () ;}} function updateBall () {for (var I = 0; I <bils. length; I ++) {var aBall = bils [I]; aBall. x + = aBall. vx; aBall. y + = aBall. vy; if (aBall. x <aBall. radius | aBall. width-aBall.radius) {aBall. vx =-aBall. vx;} if (aBall. y <aBall. radius | aBall. height-aBall.radius) {aBall. vy =-aBall. vy ;}}}
4: static effect Graph Display