Simple and cool canvas animation and cool canvas

Simple and cool canvas animation and cool canvas

I wrote my first post as a newbie in an excited and nervous mood and asked everyone to support it. My younger brother thanked me again.

The Santa Claus animation is as follows:

The html is as follows:

<Div>
Javascript is as follows:

// The element defining id as canvas is the variable myCanvasvar myCanvas = document. getElementById ("canvas"); // set myCanvas to PX in width and PX in height. myCanvas. width = "400"; myCanvas. height = "300"; // defines an environment for drawing on the canvas var ctx = myCanvas. getContext ("2d"); // This is the x coordinate var shengdanP = [{x: 0}, {x: 220}, {x: 440 }, {x: 660}]; // create an Image object var shengdanImg = new Image (); // set the shengdanImg path. src = "lr.jpg"; // defines whether to load the graph in the running program shengdanImg. onload = function () {setInterval (pao, 40);} // set the initial subscript of shengdanP to 0var index = 0; // set the initial length of the animation to 0var lc = 0; // set the coordinates of the canvas ctx. translate (290,260); // The code below for running the animation function pao () {// Add 10 lc + = 10 each time you run the lc; // If the lc is less than 260, erase shengdanImg and change the coordinates of the canvas to (-260) if (lc <) {ctx. clearRect (,); ctx. translate (-260);} // If lc is equal to, erase shengdanImg, Rotate 90 degrees, and change the coordinates of the canvas to (-70, 0 ), then erase shengdanImg else if (lc = 260) {ctx. clearRect (,); ctx. rotate (Math. PI/2); ctx. translate (-70, 0); ctx. clearRect (-70, 0, 420);} // if lc is smaller than 420, erase hengdanImg, and change the coordinates of the canvas to (-) else if (lc <) {ctx. clearRect (,); ctx. translate (-420);} // If lc is equal to, erase shengdanImg, Rotate 90 degrees, and change the coordinates of the canvas to (-70, 0 ), then erase shengdanImg else if (lc = 420) {ctx. clearRect (,); ctx. rotate (Math. PI/2); ctx. translate (-70, 0); ctx. clearRect (-70, 0, 680);} // if lc is smaller than 680, erase hengdanImg, and change the coordinates of the canvas to (-) else if (lc <) {ctx. clearRect (,); ctx. translate (-680);} // If lc is equal to, erase shengdanImg, Rotate 90 degrees, and change the coordinates of the canvas to (-70, 0 ), then erase shengdanImg else if (lc = 680) {ctx. clearRect (,); ctx. rotate (Math. PI/2); ctx. translate (-70, 0); ctx. clearRect (-70, 0, 840);} // if lc is smaller than 840, erase hengdanImg, and change the coordinates of the canvas to (-) else if (lc <) {ctx. clearRect (,); ctx. translate (-840);} // If lc is equal to, erase shengdanImg, Rotate 90 degrees, change the coordinates of the canvas to (-70, 0), and then erase shengdanImg, lc becomes 0 else if (lc = 840) {ctx. clearRect (,); ctx. rotate (Math. PI/2); ctx. translate (-70, 0); ctx. clearRect (-70, 0,); lc = 0;} // if the index is equal to the shengdanP length, the index is changed to 0 if (index = shengdanP. length) {index = 0;} // declare sx as the value var sx = shengdanP [index] of x under shengdanP whose subscript is index. x; // draw shengdanImg and ctx on the canvas. drawImage (shengdanImg, sx, 0,220, 80, 0, 0,100, 40); // Add 1 index ++ for every last run of this function infex ;}