当前位置：网站首页>Canvas - drawing pictures - dynamic drawing production

Canvas - drawing pictures - dynamic drawing production

2022-07-26 03:10:00 【ca11meback】

picture ：

drawImage()： Copy the contents of the original picture pixels to the canvas ;

The first parameter is the source image , It can be img Element or Image Constructor to create an off screen picture object ;

When there are three parameters ： Specify the drawing of the picture x、y coordinate ;

Five parameters ： Specify the drawing of the picture x、y coordinate , And the width of the picture 、 Height ;

Nine parameters ： Cropped objects The position of the crop （x,y）; The width and height of the crop (w,h); The position of the picture after clipping (x,y); The width and height shown in the picture (w,h);

The first parameter is the source image , It can be img Element or Image Constructor to create an off screen picture object ;

That means you can't put the address of the picture , Otherwise, it cannot be drawn , We need to load the pictures and then canvas Draw in Sketchpad

eg：ctx.drawImage("./src/h5.png")（ Such code is wrong ）

eg：

			var img1=new Image()
			img1.src="./src/h5.png"
			img1.onload=function(){
				ctx.drawImage(img1,100,100)
			}

This is the right way to write （ recommend ）

Of course, there is another way to write it directly in body It says in it img label , And then again js Code to get , But it will show in the page , And it also needs to adopt onload The function says （）, because js Code must be in img Only after the tag is loaded can we get

The making of moving picture ：

Code thinking ：

Load pictures in the timer （ Sprite chart ）, Then crop the image in different positions , Displayed in the canvas On the canvas 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    #box {
        border: 1px black solid;
    }
</style>
 
<body>
	<!-- <img src="./img/h.png" alt=""> -->
    <canvas id="box" height="700" width="700"> </canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        var canvas = document.querySelector("#box")
        var ctx = canvas.getContext("2d")
		var img1=new Image()
		img1.src="./img/h.png"
		img1.onload=function(){
			var n=0
			
			setInterval(()=>{
				canvas.width=canvas.width
				n++,
				n=n%10,
				ctx.drawImage(img1,0+n*108,0,108,101,300,300,108,101)

			},200)
		}
    </script>
</body>
 
</html>

n=n%10 To ensure the n Value range of , So that the range of cropping will not exceed the size of the image , Then the canvas will be emptied before each timer call

原网站

版权声明
本文为[ca11meback]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/207/202207260306221399.html

边栏推荐

猜你喜欢

随机推荐