Maison >interface Web >js tutoriel >Exemple complet d'effet pendule basé sur les compétences canvas_javascript
L'exemple de cet article décrit l'effet pendule basé sur la toile. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :
Le code spécifique est le suivant :
<!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:2px solid gray; box-shadow:0px 0px 2px 2px #494949; } </style> </head> <body> <canvas id="canvas" width="500px" height="500px"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var r = 250; var colorList = "abcdefABCDEF0123456789".split(""); var colorListLength = colorList.length; var color = function() { var _color = "#"; for(var i=0; i<6; i++) { _color += colorList[Math.round(Math.random()*colorListLength)]; } return _color; }; var createArc = function(attrs) { ctx.save(); ctx.beginPath(); ctx.fillStyle = attrs.color || color(); ctx.arc(attrs.x, attrs.y, attrs.r, 0, Math.PI*2); ctx.closePath(); ctx.fill(); ctx.restore(); }; var createLine = function(from, to) { ctx.save(); ctx.beginPath(); ctx.moveTo(from.x, from.y); ctx.lineTo(to.x, to.y); ctx.stroke(); ctx.closePath(); ctx.restore(); } var createAll = function(to) { createArc({x: 250, y: 0, r: 10, color: "black"}); createArc({x: to.x, y: to.y, r: 20, color: "black"}); createLine({x: 250, y: 0}, {x: to.x, y: to.y}); }; var minAngle = 0; var maxAngle = Math.PI; var addAngle = Math.PI/24; var angle = minAngle; var mode = "left"; var interval = setInterval(function() { var y = Math.sin(angle)*r+200; var x = Math.cos(angle)*r+250; switch(mode) { case "left": ctx.clearRect(0, 0, 500, 500); createAll({x: x, y: y}); angle += addAngle; if(angle > maxAngle) { mode = "right"; angle -= addAngle; return; } break; case "right": ctx.clearRect(0, 0, 500, 500); createAll({x: x, y: y}); angle -= addAngle; if(angle < minAngle) { mode = "default"; angle += addAngle; return; } break; case "default": createAll({x: x, y: y}); angle += addAngle; if(angle > maxAngle) { mode = "left"; angle = minAngle; return; } break; } }, 50); </script> </body> </html>
Les lecteurs intéressés par plus de contenu lié aux effets spéciaux js peuvent consulter les sujets spéciaux sur ce site : "Résumé de l'utilisation de l'animation et des effets spéciaux jQuery" et "Résumé de jQuery commun effets spéciaux classiques"
J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.