HTML5新标签

音频和视频

<audio>

属性                     描述

autoplay             媒体加载后自动播放

controller            返回当前的媒体控制器

controls              显示播控控件

currentSrc          返回当前媒体的URL

currentTime          当前播放的时间,单位秒

defaultMuted        是否静音

duration                返回媒体的播放总时长,单位秒

ended                  返回当前播放是否结束标志

error                     返回当前播放的错误状态

initialTime                 返回初始播放的位置

loop                        是否循环播放

muted                      是否静音

paused                   是否暂停

preload                    页面加载时是否同时加载音视频

readyState                  返回当前的准备状态

src                              当前音视频源的URL


方法                       描述

load()                     重新加载音视频标签

play()                      播放音视频

pause()                     暂停播放当前的音视频


拖拽

设置元素可拖放:              draggable = 'true';

拖拽元素(源元素)事件:

                        ondragstart           拖拽前触发

                        ondrag                 拖拽期间连续不断触发

                       ondragend             拖拽结束触发

目标元素事件:

                            ondragenter                 进入目标元素触发

                           ondragover                   目标元素期间

                             ondragleave                 离开目标元素触发

                           ondrop                         在目标元素上释放鼠标触发(在dragover上阻止默认事件)

画布canvas

    获取绘图环境: getContext("2d")

  设置宽高:width height (不要设置style样式:否则会等比缩放)

   绘制实心矩形:fillRect(x,y,w,h);

   绘制空心矩形:strokeRect(x,y,w,h);

   清空矩形画布: clearRect(x,y,w,h);

设置填充样式: fillStyle = 颜色|模式|渐变

设置线条样式: strokeStyle = 颜色|模式|渐变

路径:

            开始坐标:moveTo(x,y);

            结束坐标:lineTo(x,y);

               连线: stroke()    填充:fill();

设置线条粗细: lineWidth = 6;

(了解)设置线条端点样式: lineCap = "round"; 圆头

           开始路径:beginPath()

             结束路径:closePath()

圆:arc(x,y,r,开始弧度,结束弧度,flag); flag:false(默认):顺时针绘制

弧度=角度*Math.PI/180

插入图片:(涉及图片的onload)

drawImage(oImg,x,y);

drawImage(oImg,x,y,w,h);

drawImage(oImg,sx,sy,sw,sh,x,y,w,h);

设置背景(模式):

createPattern(oImg,平铺方式); 平铺方式:repeat repeat-x  repeat-y  no-repeat

渐变:

线性渐变: createLinearGradient(x1,y1,x2,y2);

添加渐变色: addColorStop(位置,颜色);  位置:0-1

放射性渐变: createRadialGradient(x1,y1,r1,x2,y2,r2);

文本:

绘制实心:fillText("文字",x,y);

绘制空心:strokeText("文字",x,y);

设置文字大小种类: font = "40px 宋体";

设置文本对齐方式:

水平对齐: textAlign = ""; start==left  center  right==end

竖直对齐: textBaseLine = "";  top  middle  bottom

阴影:

偏移: shadowOffsetX = 6;shadowOffsetY = 6;

设置阴影颜色: shadowColor = 'red';

高斯模糊: shadowBlur = 5;


web存储

localStorage        没有时间限制的数据存储

sessionStorage    当前浏览器关闭后,数据会被删除

setItem(key,value)存储数据

getItem (key) 读取数据

removeItem(key)删除单个数据

clear() 删除所有数据

.key(index)  得到一个索引的key

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容