HTML基础入门：Canvas+视频播放+音频播放

最新推荐文章于 2024-08-03 08:32:46 发布

ItJavawfc

最新推荐文章于 2024-08-03 08:32:46 发布

阅读量6.1k

点赞数 2

文章标签： Canvas入门视频播放例子音频播放

本文链接：https://blog.csdn.net/ItJavawfc/article/details/43113045

版权

通过HTML5几个小实例代码来了解HTML新特性，掌握一些基本知识。

若需要相关源码和参考资料《canvas标签介绍》《HTML5 参考手册》《HTML音视频介绍》下载地址：http://download.csdn.net/detail/itjavawfc/8394627

实例效果如下：

1.对于基本画图的例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="800" height="800" style="background:yellow;"></canvas>
	    <script type="text/javascript">
	    var image=new Image();
	    image.src="ww.jpg"

            var canvas=document.getElementById("canvas");
	    	var context=canvas.getContext("2d");
	    	context.moveTo(20,20);
	    	context.lineTo(100,20);
	    	context.lineWidth=7;
	    	context.stroke();
	    	
	    	context.closePath();
	    	context.beginPath();
	    	
	    	/*
	    	 * 画一个空心圆
	    	 */
	    	context.arc(200,100,50,0,360,false);
	    	context.stroke();
	    	
	    	/*
	    	 * 画一个实心圆
	    	 */
	    	context.closePath();
	    	context.beginPath();
	    	context.arc(200,200,50,0,360,false);
	    	context.fillStyle="#ff0000";
	    	context.fill();
	    	context.stroke();
	    	context.closePath();
	    	
	    	context.closePath();
	    	context.beginPath();
	    	/*
	    	 * 画一个矩形
	    	 */
	    	context.rect(350,100,100,100);
	    	context.stroke()
	    	
	    	/*
	    	 * 画一个实心的矩形
	    	 */
	    	context.closePath();
	    	context.beginPath();
	        context.fillRect(350,200,100,100);
	        
	        /*
	         * 画矩形的第二种方法
	         */
	        context.closePath();
	    	context.beginPath();
	    	context.strokeRect(350,300,80,100);
	    	
	    	context.closePath();
	    	context.beginPath();
	    	context.font="40px 黑体"
	    	context.fillText("黑马程序员汪方晨",200,300,60);
	    	
	    	
	    	context.closePath();
	    	context.beginPath();
 
    /*
     * 画图片
     */
      image.οnlοad=function(){
      	
      	 context.drawImage(image,480,100,300,300);
      	
      	context.closePath();
	    context.beginPath();
      	context.save();
      	context.translate(20,270);
      	context.rotate(-10*Math.PI/180);
      	context.drawImage(image,10,100,300,300);
      	context.restore();
      }
	    </script>
	</body>
</html>

其中注意点：

1.首先得到画布，并得到画布的上下文：

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

方法：context.moveTo(20,20) context.lineTo(100,20);分别表示设置起点和终点。

context.stroke(); 将图像图形显示到画布中去。

context.closePath(); 画完组件后必须将上下文关闭后在画其它组件
context.beginPath(); 开启上下文开关

canvas中显示图片：【很多人遇到了canvas中无法加载图片，这是因为当图片还没有加载出来，已经执行了drawImage（）方法，导致图标无法展现，也没有错误提醒，这里运用onload（）方法即可】

               var image=new Image();
	       image.src="ww.jpg"
               var canvas=document.getElementById("canvas");
	       var context=canvas.getContext("2d");
               image.οnlοad=function(){
         	 context.drawImage(image,480,100,300,300);
          }

2.视频音频的实例：熟悉API的运用、可以看出HTML5的强大之处.

<body>
<video src="love.mp4" controls="true" Loop="true" width="800"    poster="1.png" id="video"></video>
</br>
<Button οnclick="bofang()">播放</Button>
<Button οnclick="zanting()">暂停</Button>
<Button οnclick="kuaijin()">快进</Button>
<Button οnclick="kuaitui()">快退</Button>
<Button οnclick="bizui(this)">闭嘴</Button>

<Button οnclick="jiasu()">加速播放</Button>
<Button οnclick="jiansu()">减速播放</Button>
<Button οnclick="zhengchang()">正常播放</Button>

<Button οnclick="zengjiayinliang()">音量增加</Button>
<Button οnclick="jianshaoyinliang()">音量减少</Button>


<script>
var video=document.getElementById("video");

function  bofang(){
     video.play();	
}
function  zanting(){
     video.pause();	
}

function  kuaijin(){
     video.currentTime+=10;	
}
function  kuaitui(){
      video.currentTime-=10;	
}
function  bizui(obj){
     if(video.muted){
		 obj.innerHTML="张嘴"
		 video.muted=false;
	 }else{
		 obj.innerHTML="闭嘴"
		 video.muted=true;
	 }
 
}
function jiasu(){
    video.playbackRate=3;
}

function jiansu(){
    video.playbackRate=1/3;
}

function zhengchang(){
     video.playbackRate=1;
}


function zengjiayinliang(){
    video.volume+=0.1;
}

function jianshaoyinliang(){
     video.volume-=0.1;
}

</script>
<hr/>
<h1>音频的使用</h1>
<audio src="我的好兄弟.mp3" controls="controls"></audio>

</body>

时钟例子：这个例子可以学到很多东西

知识点：清理屏幕context.clearRect(0,0,500,500);

获得时分秒：

                        var now=new Date();
			//分钟
			var min=now.getMinutes();
			//秒钟
			var sec=now.getSeconds();
			//小时
			var hours=now.getHours();
			vhours=hours+min/60;
			var hours=hours>12?hours-12:hours;

获得时分秒的时钟盘非常有意思，需要认真看一下：rotate（）,这个方法是旋转坐标轴

定时器的运用：setInterval(drawClock,1000）

<body>
		<canvas id="canvas" width="500" height="500"></canvas>
		
		<script>
			var canvas=document.getElementById("canvas");
			var context=canvas.getContext("2d");
			function drawClock(){
				/*
				 * 清理屏幕
				 */
			context.clearRect(0,0,500,500);
			var now=new Date();
			//分钟
			var min=now.getMinutes();
			//秒钟
			var sec=now.getSeconds();
			//小时
			var hours=now.getHours();
			vhours=hours+min/60;
			var hours=hours>12?hours-12:hours;
			/*
			 * 画最外边的框框
			 */
			context.save();
			context.beginPath();
			context.lineWidth=10;
			context.strokeStyle="#0000ff"
			context.arc(250,250,200,0,360,false);
			context.stroke();
			context.closePath();
			context.restore();
			
			/*
			 * 画时刻
			 */
			 for(var i=0;i<12;i++){
			 	context.save();
				context.beginPath();
				//偏移半径
				context.translate(250,250);
				context.strokeStyle="#000";
				context.lineWidth=7;
				//rotate是坐标中旋转
				context.rotate(i*30*Math.PI/180);
				//旋转后的起点
				context.moveTo(0,-190);
				//旋转后的终点
				context.lineTo(0,-170);
				
				context.closePath();
				context.stroke();
				context.restore();
		 	}
			 /*
			 * 画分刻度
			 */
			 for(var i=0;i<60;i++){
			 	context.save();
				context.beginPath();
				//偏移半径
				context.translate(250,250);
				context.strokeStyle="#000";
				context.lineWidth=5;
				//rotate是坐标中旋转
				context.rotate(i*6*Math.PI/180);
				//旋转后的起点
				context.moveTo(0,-190);
				//旋转后的终点
				context.lineTo(0,-180);
				
				context.closePath();
				context.stroke();
				context.restore();
		 	}
			
			/*
			 * 画时钟
			 */
			context.save();
			context.beginPath();
			context.translate(250,250);
            context.rotate(30*hours*Math.PI/180);
			context.strokeStyle="#000";
			context.lineWidth=7;
			context.moveTo(0,-100);
			context.lineTo(0,5);
			context.stroke();
			context.closePath();
			context.restore();
			/*
			 * 画分钟
			 */
			context.save();
			context.beginPath();
			context.translate(250,250);
			context.strokeStyle="#000";
			context.lineWidth=5;
		 	context.rotate(6*min*Math.PI/180);
			context.moveTo(0,-150);
			context.lineTo(0,10);
			context.stroke();
			context.closePath();
			context.restore();
			
			/*
			 * 画秒钟
			 */
			
		    context.save();
			context.beginPath();
			context.translate(250,250);
			context.rotate(6*sec*Math.PI/180);
			context.strokeStyle="#ff0000";
			//context.strokeStyle="#000";
			context.lineWidth=5;
			context.moveTo(-170,0);
			context.lineTo(15,0);
			context.stroke();
			context.closePath();
			context.restore();
			/*
			 * 画中心圆
			 */
			context.save();
			context.beginPath();
			context.translate(250,250);
		   	context.arc(0,0,6,0,360,false);
	        context.fillStyle="gray";
	        context.fill();
	        context.stroke();
	        context.closePath();
	        context.restore();

			}
		setInterval(drawClock,1000);
		</script>
		
	</body>