HTML5技术

Canvas放置反弹效果随机图形 - 紫菜、

字号+ 作者:H5之家 来源:H5之家 2017-08-17 16:00 我要评论( )

1 var raf; 2 var arror = []; 3 var running = false ; 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.ar

1 var raf; 2 var arror = []; 3 var running = false; 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 } 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 } 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 } 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 } 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 })

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML Canvas:基本操作 - 救火队长

    HTML Canvas:基本操作 - 救火队长

    2017-08-16 18:00

  • HTML5 Canvas:初始Canvas - 救火队长

    HTML5 Canvas:初始Canvas - 救火队长

    2017-08-16 18:00

  • canvas一周一练 -- canvas绘制太极图(6) - 张不丢

    canvas一周一练 -- canvas绘制太极图(6) - 张不丢

    2017-08-16 09:00

  • 【canvas学习笔记四】绘制文字 - 池月

    【canvas学习笔记四】绘制文字 - 池月

    2017-08-15 11:00

网友点评