Home > Article > Web Front-end > HTML5 animation realizes dancing umbrella
This time I will bring you html5animationrealizing a dancing umbrella and what are the precautions for realizing a dancing umbrella in html5 animation. The following is a practical case, let’s take a look.
I have been learning HMTL5 intermittently, and the methods are no longer unfamiliar. I made an umbrella demo yesterday, let’s see the effect first
Mainly using the center point Transform and rotate methods. Different animations are controlled by timer.
Here are all the codes:
<canvas></canvas> <p></p> <script> var ctx; var everything = []; var cwidth = 1200; var cheight = 600; var updowntime = 0; var rotatetime = 0; var my = 2; var updown; var rotateangle = 0; function Umbrellas(sx, sy, fillStyle) { this.x = sx; this.y = sy; this.fillStyle = fillStyle; this.draw = drawUmbrella; this.moveit = moveumbrella; } function drawUmbrella() { //先画半圆 ctx.fillStyle = this.fillStyle; ctx.beginPath(); ctx.arc(this.x, this.y, 30, 0, Math.PI, true); ctx.closePath(); ctx.fill(); // ctx.save(); ctx.fillStyle = "blue"; ctx.fillRect(this.x - 1.5, this.y, 1.5, 40);//画伞柄 是一个细长的矩形 ctx.beginPath(); ctx.strokeStyle = "blue"; ctx.arc(this.x - 5, this.y + 40, 4, Math.PI, Math.PI * 2, true);//伞的钩子 是一个半圆 ctx.stroke(); ctx.closePath(); } function moveumbrella(dx, dy) { this.x += dx; this.y += dy; } function init() { ctx = document.getElementById("myCanve").getContext('2d'); ctx.translate(200, 300); for (var i = 0; i < 10; i++) { var um = new Umbrellas(i * 70, 0, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)"); everything.push(um); } updown = setInterval(change, 100); setTimeout(function () { clearInterval(updown); ctx.translate(300,0);//改变中心点 setInterval(rotat, 100); }, 10000); } //updown function change() { if (updowntime % 50 == 0) { my = -my; } // 清屏要关注到原中心点 clear(-200,-300); updowntime++; for (var i = 0; i < everything.length; i++) { if (i % 2 == 0) { everything[i].moveit(0, my); } else { everything[i].moveit(0, -my); } everything[i].draw(); } $("#ta").html("坐标y:" + everything[0].y + "updowntime:" + updowntime); //放在这才有效 在执行方法里面停止 if (updowntime == 100) { clearInterval(updown); //过渡方法 } } //选择 function rotat() { clear(-400, -300); rotatetime++; for (var i = 0; i < everything.length; i++) { ctx.save(); ctx.rotate(Math.PI * (2 / 4 + i / 4)); ctx.translate(0, rotateangle); // 统一坐标 everything[i].x = 0; everything[i].y = 0; everything[i].draw(); ctx.restore(); } rotateangle++; $("#ta").html("角度:" + rotateangle + " rotatetime:" + rotatetime); if (rotateangle == 70) { rotateangle = -rotateangle; } } function clear(x,y) { ctx.clearRect(x, y, 1200, 600); } window.onload = function () { init(); } </script>
I think it is quite interesting. Do these small and beautiful things inspire you? .
If the object is not created, the drawn umbrella is not easy to control. The following code is a static umbrella
function drawTop(ctx,fillStyle) { ctx.fillStyle = fillStyle; ctx.beginPath(); ctx.arc(0, 0, 30, 0, Math.PI, true); ctx.closePath(); ctx.fill(); } function drawGrip(ctx) { ctx.save(); ctx.fillStyle = "blue"; ctx.fillRect(-1.5, 0, 1.5, 40); ctx.beginPath(); ctx.strokeStyle = "blue"; ctx.arc(-5, 40, 4, Math.PI, Math.PI * 2, true); ctx.stroke(); ctx.closePath(); ctx.restore(); } function draw() { var ctx = document.getElementById("myCanve").getContext("2d"); ctx.translate(150, 150); for (var i = 0; i <p> I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website! </p><p>Recommended reading: </p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388844.html" target="_blank">Using Nodejs routing and controllers</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388840.html" target="_blank">Nodejs uses Mongoose to create models and APIs </a> <br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388834.html" target="_blank">How to build a server with nodejs</a><br></p>
The above is the detailed content of HTML5 animation realizes dancing umbrella. For more information, please follow other related articles on the PHP Chinese website!