master

分支 (1)

管理

管理

master

css3
/
video.html

<!DOCTYPE html>
<html>
<head>
	<title>video</title>
</head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<body>
	<!-- video的属性
		1，autoplay 视频准备就绪后立即播放
		2，controls 播放按钮
		3，height 视频播放器的高度
		4,loop 视频循环播放
		5，preload 页面加载时加载并预备播放
		6，src 播放的视频路径  url
		7，width 视频的宽度  pixels
	 -->
	<video src="./img/movie.ogv" width="300px" height:150px; controls="controls">
		<source src="./img/movie.Ogg" type="video/ogg">
			<source src="./img/movie.mp4" type="video/mp4">
				<!-- 兼容浏览器 -->
		您的浏览器不支持此类播放
	</video>

	<!-- 音频播放 -->
	<audio id="playButton" src="./img/m1.mp3" preload="preload" controls="controls" loop="loop">
		您的浏览器 不支持此类播放
	</audio>
	<!-- 和视频一样为了兼容 可以在audio标签中加source -->
	<audio controls="controls">
		 <source src="song.ogg" type="audio/ogg">
  			<source src="song.mp3" type="audio/mpeg">
		您的浏览器 不支持此类播放
	</audio>

<!-- 拖拽 -->
	<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)">

	</div>
	<img id="drag1" src="./img/b19.jpg" draggable="true"
ondragstart="drag(event)" width="336" height="69" />

<!-- canvas画布 -->
<canvas id="myCanvas" width="200" height="200">

</canvas>
<!-- 利用canvas画一条线 两段 -->
<canvas id="testCanvas" height="200" width="400" style="border:1px solid red"></canvas>

<!-- SVG -->


	<svg width="100%" height="100%" version="1.1"
	xmlns="http://www.w3.org/2000/svg">

	<rect width="300" height="100"
	style="fill:rgb(0,0,255);stroke-width:1;
	stroke:rgb(0,0,0)"/>

</svg>


</body>
</html>

<script type="text/javascript">

	// function toggleSound() {
	// 	var music = document.getElementById("vd");//获取ID
	// 	console.log(music);
	// 	console.log(music.paused);
	// 	if (music.paused) { //判读是否播放
	// 		music.paused=false;
	// 		music.play(); //没有就播放
	// 	}
	//
	// }
	// toggleSound()
	// setInterval("toggleSound()",1);
	let audioElement = document.getElementById('playButton');

	audioElement.play()

	//画布
	var c = document.getElementById("myCanvas");
	var ctxt = c.getContext("2d");//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
	ctxt.fillStyle = "#ff0";//创建图形的颜色
	ctxt.fillRect(0,0,20,20);//新建一个20*20的矩形 位置在左上角0,0处

	// 新建画布
	var c1 = document.getElementById("testCanvas");
	var cTxt1 = c1.getContext("2d");
	// 画线
	// cTxt1.moveTo(10,10)//起始点
	// cTxt1.lineTo(120,100)//画到的位置
	// cTxt1.lineTo(10,100)//折线，第二段线
	// cTxt1.stroke();//开始画
	// 绘制圆
		// cTxt1.fillStyle = "#00f"//填充颜色
		// cTxt1.beginPath();//起始一条路径或重置当前路径
		// cTxt1.arc(70,12,10,0,Math.PI*2,true)//x,y,圆的半径，起始角，结束角，是否为逆时针
		// cTxt1.closePath();//创建从当前点回到起始点的路径
		// cTxt1.fill();//填充当前绘图（路径）
	// 渐变
		// var grd = cTxt1.createLinearGradient(0,0,175,50)//创建渐变图形 175*50，位置在0，0
		// grd.addColorStop(0,"#ff0");//第一段渐变颜色
		// grd.addColorStop(1,"red");//第二段渐变颜色
		// cTxt1.fillStyle = grd;//填充
		// cTxt1.fillRect(0,0,175,50)//创建图形，跟渐变图形一样大小和位置
	//图像  将图像放到画布上
		var img = new Image();//
		img.src = "./img/flower.gif";//图像的位置
		img.onload = function(){//必须有的函数
			cTxt1.drawImage(img,0,0);//开始绘制图像
		}


//拖拽
	function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>