web前端：canvas画布，飞鸟动画，原生js

最新推荐文章于 2024-02-13 00:15:00 发布

cevent

最新推荐文章于 2024-02-13 00:15:00 发布

阅读量727

点赞数

分类专栏：微信小程序文章标签：定位 css js canvas html

本文链接：https://blog.csdn.net/weixin_37056888/article/details/113106877

版权

微信小程序专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本文介绍了一个使用HTML5 Canvas实现的动画案例，通过JavaScript控制图片在画布上移动，并结合CSS样式美化页面布局。案例中详细展示了如何创建动画效果，包括图片加载、定时刷新及绘制过程。

摘要由CSDN通过智能技术生成

1.效果图

canvas

2.less

* {
    margin: 0;
    padding: 0;
    #wrap {
        width: 600px;
        height: 800px;
        background: tomato;
        border: 2px solid white;
        border-radius: 5%;
        //这里不可使用position，会影响画布的坐标定位
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 5% auto;
        font: 20px "微软雅黑";
        text-align: center;
        color: white;
        transition: 2s;
        &:hover {
            background: steelblue;
        }
        h1 {
            margin-top: 8%;
        }
        h2 {
            margin-left: 30%;
            margin-top: 100%;
        }
        #wrap-canvas {
            position: absolute;
            background: white;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    }
}

3.js

$(function(){
	var canvasNode=document.querySelector("#wrap-canvas");
	//调整画布大小，全视口
		//canvasNode.width=document.documentElement.clientWidth;
		//canvasNode.height=document.documentElement.clientHeight;
		canvasNode.background="white";
	if(canvasNode.getContext){
		var canvasPen=canvasNode.getContext("2d");
		var imgFlag=0;
		var translatex=0;//控制移动
		setInterval(function(){
			//img有残留，需要清理
			canvasPen.clearRect(0,0,canvasNode.width,canvasNode.height);
			imgFlag++;//++1
			translatex+=10;
			if(imgFlag==9){
				imgFlag=1;
			}
			var img=new Image();
			img.src="img/q_r"+(imgFlag)+".jpg";
			img.onload=function(){
				//传入img到函数
				imgDraw(this);
			}
			//7秒60次
		},7000/60);
		
		/* canvas本身为png图片输出
         * canvas插入图片，需要image对象
         * 1.canvas操作图片，必须要等图片加载完毕
         * 2.drawImage(image,x,y,width,height)
         *   image:是image或者canvas对象，(y,y)为在canvas中的起始坐标
         *   width/height：图片的宽高设置
         * */
		function imgDraw(img){
			canvasPen.drawImage(img,translatex,translatex);
		};
		
		canvasPen.save();
		canvasPen.fillStyle="tomato";
		canvasPen.beginPath();
		canvasPen.fillRect(250,250,100,100);
		canvasPen.restore();
	}
})

4.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<title>canvas动画-fly bird</title>
	</head>
	<link rel="stylesheet" href="../6-bootstrap/css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/14-canvas-flybird.css" />
	<body>
		<div id="wrap">
			<h1>canvas动画-fly bird</h1>
			<canvas id="wrap-canvas" width="500px" height="500px"></canvas>
			<h2>PS：一刀coder</h2>
		</div>
	</body>
	<script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="../6-bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/14-canvas-flybird.js"></script>

</html>