A simple way to write frame animation

Posted by dey.souvik007 on Fri, 27 Dec 2019 19:41:42 +0100

Everything is very simple, as long as the basic work is solid

The so-called industry is a pile of simple things

What's more, we can only start from the most basic, Iterative Construction of knowledge system??

First look at the picture:


2. The code is as follows:

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<title>A simple way to write frame animation</title>
				border: 1px solid;

	 	window.onload = function(){
	 		var c1 = document.getElementById('c1')
	 		var ctx= c1.getContext('2d')
	 		var canvasWidth = ctx.canvas.width;
	 		var canvasHeigh = ctx.canvas.height;

	 		var img = new Image();
	 		img.onload = function(){
		 		var imgWidth = img.width;
		 		var imgHeight = img.height;
		 		var personWidth = imgWidth/4;
		 		var personHeight = imgHeight/4;
		 		var x0 = canvasWidth/2 - personWidth/2;
		 		var y0 = canvasHeigh/2 - personHeight/2;
		 		var timer =null;
		 		var index = 0;
		 		c1.onmouseover = function(){
		 			timer = setInterval(function(){
							index = 0;

		 		c1.onmouseout = function(){


	 		img.src = "image/04.png"

	<canvas id="c1"  width="500" height="500"></canvas>




Draw the villain in the middle of the canvas, and then, when the mouse moves in, start a timer to change the picture constantly


Remove and end the timer!