HTML的笔记及展示(3)(绘图和多媒体支持相关)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m0_37482190/article/details/85598152

实际应用中,我们使用HTML来完成绘图和多媒体相关功能不是很常用,所以只要知道,需要用时查阅使用即可。
一、绘图
<canvas…/>元素只是绘制图形的容器,必须使用JavaScript脚本来绘制图形。
示例:

<canvas id="mc" width="300" height="180"
	style="border:1px solid black"></canvas>
<script type="text/javascript">
	//获取canvas元素对应的DOM对象
	var canvas = document.getElementById('mc');
	//获取在canvas上绘图的CanvasRenderingContext2D对象
	var ctx = canvas.getContext('2d');
	//设置填充颜色
	ctx.fillStyle = '#f00';
	//绘制矩形
	ctx.fillRect(30,40,80,100);
</script>

因为<canvas…/>只是一个绘图用的画布,真正负责绘图的是canvas对象的getContext()方法返回的CanvasRenderingContext2D对象。
二、多媒体
1.使用<audio…/>元素播放音频

<h2>音频播放</h2>
<audio src="七月的风八月的雨.mp3" controls></audio>

不支持<audio…/>元素的浏览器会显示这段文本内容。
2.使用<video…/>元素播放视频

<h2>视频播放</h2>
<video src="效果演示.avi" controls></video>

不支持<video…/>元素的浏览器会显示这段文本内容。
在HTML页面上放置了<audio…/>、<video…/>元素后,就相当于在页面添加了一个内置支持的音频、视频播放器。只要指定了controls属性,就会生成播放控制条。
HTML5目前推荐使用OGG Vobis压缩格式。

只在这里指出一些比较常用的元素,其他相关元素就不说了。

猜你喜欢

转载自blog.csdn.net/m0_37482190/article/details/85598152