imagehtml5,html的image

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

html5怎么弄图像和多媒体的详细过程

html5中设置整页背景图片的方法是利用css3样式：

写法如下：img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0;}@media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ }}

多媒体：之前曾经介绍过，在HTML5中可以通过video标签在网页中播放影片，且不需要再安装额外的插件，此功能已经带给用户极大的便利。但基本的video标签只提供了简单功能的播放器界面，如果想要改变播放器的外观和功能，只能结合canvas标签和javascript语句，就能制作出酷炫的播放控制器。

{drawImage}

画布canvas如何与视频video标签结合，达到制作各种视频功能的效果呢？其秘诀在于通过画布重新描绘一次视频的内容，将视频的每个画面都转换成画布的图像，这样就可以通过javascript语言所提供的图像控制方法来操控它们。所以炫酷播放器所使用的视频功能，并不针对video，而是针对描绘出影像的canvas。

能够描绘影像到画布中的方法是“drawImage"，此方法允许在canvas中插入画布（canvas），图像（img）和视频（video）等元素。

drawImage方法有三种：

drawImage（image，dx，dy）//原比例绘制图像

drawImage（image，dx，dy，dw，dh）//按设置长宽绘制图像

drawImage（image，sx，sy，sw，sh，dx，dy，dw，dh）//裁切后绘制图像