正文  软件开发 > html5 >

Canvas放置反弹效果随机图形,canvas放置反弹

Canvas放置反弹效果随机图形,canvas放置反弹 1 var raf; 2 var arror = []; 3 var running = false; 4 ...

Canvas放置反弹效果随机图形,canvas放置反弹

  1    var raf;
  2    var arror = [];
  3    var running = false;
  4    //绘制圆形
  5    function createBall() {
  6        return {
  7            x: 0,
  8            y: 0,
  9            vx: 10-Math.random()*10,
 10            vy: 10-Math.random()*10,
 11            radius: 25,
 12            color:"red",
 13            draw: function() {
 14                ctx.beginPath();
 15                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
 16                ctx.closePath();
 17                ctx.fillStyle = this.color;
 18                ctx.fill();
 19            }
 20        }
 21    }
 22    //绘制正方形
 23    function createSquare() {
 24        return {
 25            x: 0,
 26            y: 0,
 27            vx: 10-Math.random()*10,
 28            vy: 10-Math.random()*10,
 29            color:"red",
 30            draw: function() {
 31                ctx.beginPath();
 32                ctx.fillStyle = this.color;
 33                ctx.fillRect(this.x, this.y,30, 30);
 34                ctx.closePath();
 35            }
 36        }
 37    }
 38    //绘制五角星
 39    function createStar() {
 40        return {
 41            x: 0,
 42            y: 0,
 43            vx: 10-Math.random()*10,
 44            vy: 10-Math.random()*10,
 45            color:"red",
 46            draw: function() {
 47                ctx.font = "24px serif";
 48                ctx.textBaseline = "hanging";
 49                ctx.fillStyle=this.color;
 50                ctx.fillText("五角星",this.x, this.y);
 51 
 52            }
 53        }
 54    }
 55    //绘制三角形
 56    function createTriangle() {
 57        return {
 58            x: 0,
 59            y: 0,
 60            vx: 10-Math.random()*10,
 61            vy: 10-Math.random()*10,
 62            color:"red",
 63            draw: function() {
 64                ctx.beginPath();
 65                ctx.moveTo(this.x,this.y);
 66                ctx.lineTo(this.x+25,this.y+25);
 67                ctx.lineTo(this.x+25,this.y-25);
 68                ctx.fillStyle=this.color;
 69                ctx.fill();
 70            }
 71        }
 72    }
 73    //清除
 74    function clear() {
 75        ctx.fillStyle = ‘rgba(255,255,255,0.3)‘;
 76        ctx.fillRect(0,0,canvas.width,canvas.height);
 77    }
    //判断图形坐标是否超出画布范围 78 function draw() { 79 clear(); 80 arror.forEach(function(ball, i){ 81 ball.draw(); 82 ball.x += ball.vx; 83 ball.y += ball.vy; 84 if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { 85 ball.vy = -ball.vy; 86 } 87 if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { 88 ball.vx = -ball.vx; 89 } 90 }); 91 92 raf = window.requestAnimationFrame(draw); 93 } 94 canvas.addEventListener(‘click‘,function(e){ 95 if (!running) { 96 raf = window.requestAnimationFrame(draw); 97 running = true; 98 } 99 var colorarr=["#000000","#7F7F7F","#880015","#ED1C24","#FF7F27","#FFF200","#22B14C","#00A2E8","#3F48CC","#A349A4","#B97A57","#FFAEC9","#B5E61D"]; 100 var Graphics = ["Round","Square","Star","Triangle"]; 101 var typexz=Graphics[Math.floor(Math.random()*4)]; 102 var ball; 103 switch(typexz){ 104 case "Round": 105 ball = createBall(); 106 break; 107 case "Square": 108 ball = createSquare(); 109 break; 110 case "Star": 111 ball = createStar(); 112 break; 113 case "Triangle": 114 ball = createTriangle(); 115 break; 116 } 117 ball.x = e.clientX; 118 ball.y = e.clientY; 119 ball.color = colorarr[Math.floor(Math.random() * 10 + 3)]; 120 arror.push(ball); 121 }); 122 draw(); 123 document.addEventListener(‘keydown‘,function (e) { 124 if(e.keyCode==32){ 125 event.preventDefault(); 126 window.cancelAnimationFrame(raf); 127 running = false; 128 } 129 })

http://www.bkjia.com/HTML5/1222919.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1222919.htmlTechArticleCanvas放置反弹效果随机图形,canvas放置反弹 1 var raf; 2 var arror = []; 3 var running = false ; 4 // 绘制圆形 5 function createBall() { 6 return { 7 x: 0 , 8 y:...