几个好玩的H5案例

最新推荐文章于 2023-12-29 11:39:17 发布

qq_36594703

最新推荐文章于 2023-12-29 11:39:17 发布

阅读量4.6k

点赞数 3

分类专栏： h5

本文链接：https://blog.csdn.net/qq_36594703/article/details/78195339

版权

h5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一排伞：

绘制圆形:context.arc(x,y,radius,startAngle,endAngle,anticlockwise);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>html5</title>
<script language="javascript">
function drawTop(ctx,fillStyle){
	ctx.fillStyle=fillStyle;
	ctx.beginPath();
	ctx.arc(0,0,30,0,Math.PI,true);
	ctx.closePath();
	ctx.fill();
}
function drawGrip(ctx){
	ctx.save();
	ctx.fillStyle="blue";
	ctx.fillRect(-1.5,0,1.5,40);
	ctx.beginPath();
	ctx.strokeStyle="blue";
	ctx.arc(-5,40,4,Math.PI,Math.PI*2,true);
	ctx.stroke();
	ctx.closePath();
	ctx.restore();
}
function draw(){
	var ctx=document.getElementById("myCanvas").getContext("2d");
	ctx.translate(80,80);
	for(var i=1;i<10;i++){
		ctx.save();
		ctx.translate(60*i,0);
		drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
		drawGrip(ctx);
		ctx.restore();
	}
}
window.οnlοad=function(){
	draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="300"></canvas>
</body>
</html>

一圈伞：

旋转坐标空间
每次开始绘制图形之前，现将坐标空间旋转pi*(2/4+i/4),再将坐标空间沿y轴负方向移动100，然后开始绘制图形，从而实现是图形沿一中心点平均旋转分布.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>html5</title>
<script language="javascript">
function drawTop(ctx,fillStyle){
	ctx.fillStyle=fillStyle;
	ctx.beginPath();
	ctx.arc(0,0,30,0,Math.PI,true);
	ctx.closePath();
	ctx.fill();
}
function drawGrip(ctx){
	ctx.save();
	ctx.fillStyle="blue";
	ctx.fillRect(-1.5,0,1.5,40);
	ctx.beginPath();
	ctx.strokeStyle="blue";
	ctx.arc(-5,40,4,Math.PI,Math.PI*2,true);
	ctx.stroke();
	ctx.closePath();
	ctx.restore();
}
function draw(){
	var ctx=document.getElementById("myCanvas").getContext("2d");
	ctx.translate(150,150);
	for(var i=1;i<9;i++){
		ctx.save();
		ctx.rotate(Math.PI*(2/4+i/4));
		ctx.translate(0,-100);
		drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
		drawGrip(ctx);
		ctx.restore();
	}
}
window.οnlοad=function(){
	draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="300"></canvas>
</body>
</html>

查看视频帧动画：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>html5</title>
<!--video元素声明了autoplay属性，这样页面加载完成后，视频会被自动播放，此外还增加了两个事件处理函数，当视频加载完毕，准备开始播放的时候，会触发oncanplay函数来执行预设的动作，当视频播放完后，会触发onended函数停止帧的创建-->
<video id="movies" autoplay οncanplay="startVideo()" οnended="stopTimeline()" autobuffer="true" width="400px" height="300px">
	<source src="medias/volcano.ogv" type='video/ogg;codecs="theora,vorbis"'>
	<source src="健美操.mp4" type='video/mp4'>
</video>
<canvas id="timeline" width="400px" height="300px">
<script type="text/javascript">
	//定义时间间隔，一毫米为单位
	var updateInterval=5000;
	//定义抓取画面显示大小
	var frameWidth=100;
	var frameHeight=75;
	//定义行列数
	var frameRows=4;
	var frameColumns=4;
	var frameGrid=frameRows*frameColumns;
	//定义当前帧
	var frameCount=0;
	var intervalId;
	//定义播放完毕取消定时器
	var videoStarted=false;
	function startVideo(){
		if(videoStarted)
		return;
		videoStarted=true;
		updateFrame();
		intervalId=setInterval(updateFrame,updateInterval);
		var timeline=document.getElementById("timeline");
		timeline.οnclick=function(evt){
			var offX=evt.layerX-timeline.offsetLeft;
			var offY=evt.layerY-timeline.offsetTop;
			//计算那个位置的帧被单机
			var clickedFrame=Math.floor(offY/frameHeight)*frameRows;
			clickedFrame+=Math.floor(offX/frameWidth);
			//计算视频对应播放到哪一帧
			var seekedFrame=(((Math.floor(frameCount/frameGrid))*frameGrid)+clickedFrame);
			//如果用户单机的帧位于当前帧之前，则设定是上一轮的帧
			if(clickedFrame>(frameCount%16))
				seekedFrame-=frameGrid;
				//不允许跳出当前帧
			if(seekedFrame<0)
			return;
			var video=document.getElementById("movies");
			video.currentTime=seekedFrame*updateInterval/1000;
			frameCount=seekedFrame;
		}
	}
	//该函数负责把抓取的帧画面绘制到画布上
	function updateFrame(){
		var video=document.getElementById("movies");
		var timeline=document.getElementById("timeline");
		var ctx=timeline.getContext("2d");
		//根据帧数计算当前播放位置，然后以视频为输入参数绘制图像
		//需要精确计算从视频中截取的每帧应该对应到那个canvas网格中，根据每帧的宽度和高度计算出他们的起始绘制坐标
		var framePosition=frameCount%frameGrid;
		var frameX=(framePosition%frameColumns)*frameWidth;
		var frameY=(Math.floor(framePosition/frameRows))*frameHeight;
		//这里传入的不是图像而是视频对象
		ctx.drawImage(video,0,0,400,300,frameX,frameY,frameWidth,frameHeight);
		frameCount++;
	}
	//在视频播放完毕后停止抓取帧
	function stopTimeline(){
		clearInterval(intervalId);
	}
</script>
</head>
<body>
 
</body>
</html>

qq_36594703

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
几个好玩的H5案例

一排伞：绘制圆形:context.arc(x,y,radius,startAngle,endAngle,anticlockwise);html5function drawTop(ctx,fillStyle){ ctx.fillStyle=fillStyle; ctx.beginPath(); ctx.arc(0,0,30,0,Math.PI,true); ctx.clos
复制链接

扫一扫