Canvas综合应用实验

最新推荐文章于 2021-07-28 10:42:02 发布

javscp_q

最新推荐文章于 2021-07-28 10:42:02 发布

阅读量462

点赞数 1

分类专栏：数据可视化

本文链接：https://blog.csdn.net/javcp_q/article/details/100545802

版权

数据可视化专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了一个使用HTML5 Canvas实现的视频播放互动案例，包括10秒倒计时、Skip按钮、视频播放控制、红包动画及点击事件。通过JavaScript控制Canvas绘制倒计时数字，视频播放暂停逻辑，以及响应鼠标点击事件。

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

<!doctype html>
<html>
	<!-- 说明： -->
	<!-- 1.开始有10秒倒计时 -->
	<!-- 2.然后在canvas中视频开始播放 -->
	<!-- 3.在开始倒计时的时候，右上角有Skip按钮 -->
	<!-- 4.鼠标单击Skip按钮，能直接跳过倒计时，进入视频播放 -->
	<!-- 5.视频播放4-6秒时暂停，停10秒，再继续播放 -->
	<!-- 6.在暂停的10秒内，出现移动的红包 -->
	<!-- 7.鼠标点击红包，出现alert框，显示“学号-名字”，确定后跳过暂停剩余时间，视频继续播放 -->
	<head>
		<meta charset="UTF-8">
		<title>Canvas Test wyq</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			canvas{
				pointer-events: none;
				position: absolute;
			}
			#box{
				padding: 5px;
				width: 610;
				height: 360;
				background-color: yellow;
				display: inline-block;
			}
			#skipBox{
				position: absolute;
				padding: 5px;
				background-color: white;
				display: inline-block;
				left: 520px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var video = document.getElementById("video");
				var canvas = document.getElementById("canvas");
				var ctx = canvas.getContext("2d");
				var num=9;
				var time=1;
				var skip = document.getElementById("skipBox");
				var img = new Image();
				img.src = "hb.gif";
				var dx = Math.round(Math.random()*(400-200)+200);
				var dy = 0;
				var c;
				video.pause();
				video.style.visibility="hidden";
				
				skip.onclick = function(){
					ctx.clearRect(0,0,canvas.width,canvas.height);
					clearInterval(interval1);
					video.style.visibility="visible";
					video.play();
					skip.style.display="none"
				}
				
				var interval1 = setInterval(function(){
					drawNum();
					if(num==-1){
						clearInterval(interval1);
						ctx.clearRect(0,0,canvas.width,canvas.height);
						video.style.visibility="visible";
						video.play();
						skip.style.display="none"
					}
				},1000);
				
				function drawNum(){
					ctx.clearRect(0,0,canvas.width,canvas.height);
					ctx.beginPath();
					ctx.font = "bold 50px Arial";
					ctx.fillStyle = "blue";
					ctx.textAlign = "center";
					ctx.textBaseline = "middle";
					ctx.fillText(num,canvas.width/2,canvas.height/2);
					ctx.closePath();
					num--;
				}
				
				var interval2 = setInterval(function(){
					if(video.currentTime>=5){
						video.pause();
						time++;
						canvas.style.pointerEvents="all";
						drawMoney();
						if(time==200){
							clearInterval(interval2);
							ctx.clearRect(0,0,canvas.width,canvas.height);
							video.play();
							canvas.style.pointerEvents="none";
						}
					}
				},50)
				
				function drawMoney(){
					ctx.clearRect(0,0,canvas.width,canvas.height);
					dy++;
					ctx.drawImage(img,dx,dy,50,70);
				}
				
				canvas.onclick = function(event){
					if(event.clientX>=5+dx&&event.clientX<=5+dx+50){
						if(event.clientY>=5+dy&&event.clientY<=5+dy+70){
							c = confirm("2016-wyq");
							if(c==true){
								clearInterval(interval2);
								ctx.clearRect(0,0,canvas.width,canvas.height);
								video.play();
								canvas.style.pointerEvents="none";
							}
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			<div id="skipBox">
				<p>skip>></p>
			</div>
			<canvas id="canvas" width="640" height="330"></canvas>
			<video controls id="video" width="640" height="330" >
				<source src="video.mp4">
			</video>
		</div>
	</body>
</html>