音频和视频
<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
网友评论