canvas——绘制图片——动图制作

最新推荐文章于 2024-05-10 10:10:22 发布

ca11meback

最新推荐文章于 2024-05-10 10:10:22 发布

阅读量1.2k

点赞数 1

文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/weixin_53596260/article/details/125974354

版权

canvas drawImage 精灵图图片裁剪定时器

关键词由CSDN通过智能技术生成

图片：

drawImage()：将原图片像素的内容复制到画布上；

第一个参数是源图片，可以是img元素或Image构造函数创建的屏幕外图片对象；

三个参数时：指定图片绘制的x、y坐标；

五个参数时：指定图片绘制的x、y坐标，以及图片的宽度、高度；

九个参数时：裁剪的对象裁剪的位置（x,y）; 裁剪的宽度和高度(w,h); 裁剪后图片绘制的位置(x,y); 图片显示出来的宽度和高度(w,h);

第一个参数是源图片，可以是img元素或Image构造函数创建的屏幕外图片对象；

就意味着不能放图片的地址，不然是不能够绘制的，我们需要把图片加载出来然后再在canvas画板中绘制

eg：ctx.drawImage("./src/h5.png")（这样的代码就是错误的）

eg：

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

这样才是正确的写法（推荐）

当然还有一种写法就是直接在body里面写img标签，然后再js代码中去获取，但是在页面中就会显示，并且还需要采用onload函数里面写（），因为js代码必须要在img标签加载好了之后才能获取

动图的制作：

代码思路：

在计时器里面加载图片（精灵图），然后在图片上裁剪不同的位置，显示在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保证了n的取值范围，使得裁剪的范围不会超过图片的大小，然后每次计时器调用之前会先清空画布