MDN--canvas--循环全景照片

效果图:
在这里插入图片描述

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="800" height="200"></canvas>
		<script>
			var ctx = document.querySelector('#canvas').getContext('2d');
			
			var canvasWidth = 800;		//画布的大小与HTML中一致
			var canvasHeight = 200;
			var x ,y = 0;				//用于表示图片坐标
			var dx = 0.75; 				//图片每次向右移动的距离
			var img = new Image();
			//图片地址https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg
			img.src = 'Park.jpg';
			var imgWidth;				//图片宽度
			var imgHeight;				//图片高度
			var clearx;					//清理画布的宽度
			var cleary;					//清理画布的高度
			
			img.onload = function(){
				imgWidth = img.width;
				imgHeight = img.height;
				
				clearx = imgWidth > canvasWidth ? imgWidth : canvasWidth;
				cleary = imgHeight > canvasHeight ? imgHeight : canvasHeight;
				
				if(imgWidth > canvasWidth){
					x = canvasWidth - imgWidth;
				}else{
					x = 0;
				}
				requestAnimationFrame(draw);
			}
			
			function draw(){
				ctx.clearRect(0,0,clearx,cleary);
				ctx.save();
				// 图片宽度大于canvas宽度
				if(imgWidth > canvasWidth){
					// 只要第一幅图向右边移动一点就在左边画第二幅图
					// if(x > canvasWidth - imgWidth){
					// 在第一幅图向右边移动至0,在左边画第二幅图
					if(x >= 0){
						ctx.drawImage(img,x - imgWidth,y);
					}
					if(x >= canvasWidth){
						x = canvasWidth - imgWidth;
					}
				}
				// 图片宽度小于canvas宽度
				else{
					if(x - imgWidth + dx < 0){
						ctx.drawImage(img,x - imgWidth,y);
					}else{
						x = 0;
					}
				}
				ctx.drawImage(img,x,y);
				x += dx;
				ctx.restore();
				requestAnimationFrame(draw);
			}
			
		</script>
	</body>
</html>

已标记关键词 清除标记
课程简介: 历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页