本文主要是介绍canvas圆周动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
圆周运动
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | <!DOCTYPE html> <html> <head lang= "en" > <meta charset= "UTF-8" > <title></title> </head> <body> <canvas width= "600" height= "600" id= "race" style= "border:1px solid red;" ></canvas> <script> var race = document.getElementById( 'race' ); var cxt = race.getContext( '2d' ); var ang = 0; var speed = 1; var sAng = 0; function draw() { cxt.save(); cxt.translate(300, 300); cxt.save(); cxt.beginPath(); cxt.fillStyle = '#CCA548' ; cxt.arc(0, 0, 220, 0, 360*Math.PI/180, false ); cxt.fill(); cxt.closePath(); cxt.restore(); cxt.save(); cxt.beginPath(); cxt.fillStyle = 'white' ; cxt.arc(0, 0, 200, 0, 360*Math.PI/180, false ); cxt.fill(); cxt.closePath(); cxt.restore(); cxt.save(); cxt.rotate(ang*Math.PI/180); ang += speed; //speed += 1; cxt.fillStyle = '#CDC9A5' ; cxt.fillRect(210, -40, 40, 80); cxt.strokeRect(210, -40, 40, 80); cxt.fillStyle = 'white' ; cxt.fillRect(230, -20, 10, 10); cxt.fillRect(230, 10, 10, 10); cxt.save(); cxt.translate(210, -20); cxt.fillStyle = '#000' ; cxt.beginPath(); cxt.arc(0, 0,10, 0, 360*Math.PI/180, false ); cxt.fill(); cxt.closePath(); cxt.fillStyle = 'white' ; cxt.beginPath(); cxt.arc(0, 0, 2, 0, 360*Math.PI/180, false ); cxt.fill(); cxt.closePath(); cxt.save(); if (sAng > 360){ sAng = 0; } cxt.rotate(sAng*Math.PI/180); sAng += 4; cxt.strokeStyle = 'white' ; cxt.strokeRect(-5*Math.sqrt(2), -5*Math.sqrt(2), 10*Math.sqrt(2), 10*Math.sqrt(2)); cxt.restore(); cxt.restore(); cxt.save(); cxt.translate(210, 20); cxt.fillStyle = '#000' ; cxt.beginPath(); cxt.arc(0, 0,10, 0, 360*Math.PI/180, false ); cxt.fill(); cxt.closePath(); cxt.save(); cxt.rotate((sAng+45)*Math.PI/180); cxt.strokeStyle = 'white' ; cxt.strokeRect(-5*Math.sqrt(2), -5*Math.sqrt(2), 10*Math.sqrt(2), 10*Math.sqrt(2)); cxt.restore(); cxt.restore(); cxt.beginPath(); cxt.arc(210, 20, 2, 0, 360*Math.PI/180, false ); cxt.fill(); cxt.closePath(); cxt.restore(); cxt.restore(); } //draw(); function animate() { cxt.clearRect(0, 0, 600, 600); draw(); requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> </body> </html> |
这篇关于canvas圆周动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
