HTML5与JS媒体操作与前端画图详解-优快云博客

本文链接：https://blog.youkuaiyun.com/c9087/article/details/126177632

html5与js 媒体文件
<audio>音频
<video>视频
src定义路径 autoplay自动播放 controls显示控件
表单:
<form action="">
<input type="date">日期框
<input type="month">月份框
<input type="time">时钟框
<input type="week">星期框
<input type="color">颜色框
<input type="number">数字框
<input type="range" id="id01" onchange="f1()" max="80" min="30" step="5"//设置步长>滚动条
<h1 id="font"></h1>
<input type="email" placeholder="请添加邮箱"//提示语 required=""//必输项>验证邮箱
<input type="tel">电话
<input type="submit">

</form>
</body>
<script>
function f1() {
var a = document.getElementById("id01").value;
document.getElementById("font").innerHTML = a

}
</script>

布局：

画图
svg：1.svg是伸缩矢量图，canvas会依赖分辨率
2.svg可以存成图片和文字文件格式，canvas画图必须与js连用
3.svg可以被搜索，canvas可以嵌入图片
4.svg可以放大缩小不失真，canvas可以制作动画和3D
5.svg画图标，canvas可以画动画，地图，游戏等
创建画布：<svg></svg>
画直线
<line x1="50" y1="50" x2="200" y2="200" stroke="red" stroke-width="3"></line>
x1和y1是起始坐标，x2,y2是终止坐标，stroke先提颜色，stroke-width线体粗细
矩形:
<rect x="20" y="20"//起始坐标 width="230" height="230"//设置宽度高度 fill="red"//填充色 stroke="green" stroke-width="9"
rx="100" ry="100"//圆角属性></rect>
圆：
<circle cx="600" cy="600" r="300" fill="red" stroke="green" stroke-width="20"></circle>
cx 和cy是中心点坐标 r半径
随圆
<ellipse cx="400" cy="400" rx="200" ry="100" fill="red" stroke="green" stroke-width="20"></ellipse>
cx cy是中心点坐标，rx水平半径，ry垂直半径
多边形
<polygon points="0,150 300,150 150,0" fill="red" stroke="green" ></polygon>
points点坐标写作：x1,y1 x2,y2 x3.y3
路径：
M代表起始点 Z封闭图形 L直线 C曲线 S平滑曲线 Q二次贝塞尔曲线 T平滑贝塞尔曲线
<path d="M0 150 S300 150 150 150 0" stroke="green"></path>
所有点坐标以空格分隔，在坐标轴前标出线体类型
canvas
//二次曲线
context.moveTo(20,200)
       context.quadraticCurveTo(150,50,300,200)
       context.stroke()
//贝塞尔曲线
   var cavselem=document.getElementById("cavselem");
       var context=cavselem.getContext('2d');
       context.lineWidth='10';
       context.strokeStyle='#ec3487';
       context.moveTo(20,200)
       context.bezierCurveTo(20,100,250,250,200,20)//x1 y1 x2 y2 x3 y3
       context.stroke()
//线体矩形
   context.strokeStyle='#ec3487';
       context.strokeRect(20,20,200,200)

       context.stroke()
   //填充矩形
   context.fillStyle="red"
       context.fillRect(120,120,200,200,)
coontxt.fill()
//填充圆
context.lineWidth='10';
       context.strokeStyle='#ec3487';
context.arc(200,150,80,0,Math.PI/2,false)
   context.fill()
//线体圆
context.lineWidth='10';
       context.strokeStyle='#ec3487';
context.arc(200,150,80,0,Math.PI/2,false)
   context.stroke()
值的顺序：圆心x轴，圆心y轴，半径，起始，终止，，true逆时针画
//三角形
   context.lineWidth='5';
       context.strokeStyle='#ec3487';
context.moveTo(200,0)
       context.lineTo(0,150)
       context.lineTo(400,150)
       context.lineTo(200,0)
       context.stroke()
//填充三角形
    context.lineWidth='5';
       context.strokeStyle='#ec3487';
context.moveTo(200,0)
       context.lineTo(0,150)
       context.lineTo(400,150)
       context.lineTo(200,0)
       context.fill()
//设置文字
空心文字：
       context.strokeStyle='#ec8831';
context.font="50px 楷体"//设置字体样式
       context.strokeText("看看文字效果",100,100)//内容 xy
实心文字：
   context.strokeStyle='#ec8831';
context.font="50px 楷体"
       context.fillText("看看文字效果",100,100)//内容 xy
图片
var img=new Image()
       img.src="img/1.jpg"
       img.onload=function(){
           context.drawImage(img,cavselem.offsetWidth,cavselem.offsetHeight)
       }
开始和结束画笔 beginPath()
closePath()
解决的事情：当画多个图形，图形会一笔画出有多余的线体，或者样式一样，都会加载最后一个图形的样式，所以给所画的图形设置两个函数
保存和重置
save()保存
restore()重置
解决的事情：当画多个图形，其中一个图形想应用前面图形的样式，可在前面图形设置保存
图形组合：图形组合
con.globalCompositeOperation = '设置组合方式'
组合方式
source-over 绘制两个图形，新图形在上
destination-over 绘制两个图形，旧图形在上
source-atop 绘制旧图形和新图形的重叠部分
destination-atop 绘制新图形和旧图形的重叠部分

source-in 只绘制两个图形的重叠部分，显示新图形的颜色
destination-in 只绘制两个图形的重叠部分，显示旧图的颜色

source-out 绘制新图形没有重叠的部分
destination-out 绘制旧图没有重叠的部分

lighter 绘制两个图形重叠部分进行加色处理
darker 绘制两个图形重叠部分进行减色处理
copy 绘制新图形
xor 只绘制两个图形重叠部分变透明
透明度
gloabalAlpha设置透明度0-1之间的值
阴影
shadowOffsetX水平距离
shadowOffsetY垂直距离
shadowBlur模糊效果
shadowClor阴影颜色
变换
translate(x,y)平移
scale(x,y)缩放
rotate()旋转
transform(宽度，水平扭曲，垂直扭曲，高度，水平移动，垂直移动)矩阵
渐变色:
       var line=txt.createLinearGradient(0,100,0,300)起始位置，终止位置
       line.addColorStop(0,"red") 位置0-1之间添加颜色
       line.addColorStop(0.5,"green")
       txt.fillStyle=line//填充背景
           txt.fillRect(50, 50, 200, 200)
径向渐变:
       var rad=txt.createRadialGradient(180,200,40,200,200,80)
值得顺序:内圆中心点x，y轴，内圆半径，外圆中心点x，y轴，外圆半径
       rad.addColorStop(0,"green")
       rad.addColorStop(0.5,"red")
       txt.fillStyle=rad
       txt.arc(200,200,80,0,Math.PI*2,false)
       txt.fill()
其他：
clip()裁切
clearRec(x,y,width,height)清除
媒体操作:
属性和方法
1.src定义路径
2.controls是否显示控件，true则显示
3.autoplay自动播放
4.play()播放
5.paused()暂停
6.load()重新加载，重新播放
7.paused判断是否暂停 true暂停
8.ended判断是否停止，true停止
9.muted 获取或修改静音，true 为静音
10.volume 设置声音大小0-1之间
11.playbackRate 1-5 设置播放速度
12.dration 总时长
13.currentTime 当前播放位置
14.startTime开始播放时间
15.error 返回错误对象
web worker
js是单线程，通过web worker 可以模拟多线程，单线程处理比较安全，但是是如果处理时间过长，就会处于无响应的状态，所以可以用多线程来进行解决

使用步骤
1.创建web worker对象
var w=new Worker("js文件")
2.发送数据
w.postMessage("参数")
3.接受数据
w.onmessage=function(value){
//value接收参数
}
4.错误处理
w.onerror=function(error){
//error错误信息是参数
}
5.结束进程
w.close()

文件操作
js两种机制：一种事件机制一个io机制
文件操作对象
Blob 通过二进制原始数据读取
file 去取单个文件对象
fileList 读取多个文件对象
fileReader 读取文件信息
file和fileList的属性和方法
name获取文件名成
size文件字节长度
type文件类型
lastModifiedDate最后修改日期
获取单个文件
var v = document.getElementById("file").files[0]
获取多个文件
<input type="file" id="file" multiple
var = document.getElementById("file").files
fileReader的属性和方法
readAsBinaryString()以二进制去取
readAsText(文件，"utf-8")以某种字符编码去读取
readAsDataURL()获取一个对象路径，读取对象
abort()中断读取
reslut获取读取对象信息
loaded()当前读取的字节数
slice(开始位置，步长)分段读取方法
fileReader的事件
onloadstart读取文件开发时触发
onprogress 读取文件过程中触发
onload 读取文件成功完成时触发
onabort 读取文件中断时触发
onloadend 读取文件成功完成时触发（无论成功与否）
onerror 读取文件报错时触发
文件拖拽
如果要实现文件拖拽，必须在标签里设置draggable=true才能拖拽，
列如<div draggable=true></div>
拖拽事件
ondragstart鼠标放在拖拽元素上开始触发
ondragenter拖拽元素进入目标元素开始触发
ondragover 拖拽元素在目标元素上移动时触发，
ondrop 拖拽元素进入目标元素，并且鼠标松开时触发
ondragend 鼠标拖拽完成后进行触发
属性和方法
getData()获取数据
setData(类型，内容)设置数据
preventDefault()启动元素放置事件
dropEffect被拖动元素的权限设置
none不能放置目标元素上
move 可以在目标元素上移动
copy 复制到目标元素里
link 可以获得拖拽元素的地址
effectAllowed 运行拖动的效果
none 不允许有任何行为
copy 只允许复制
move 只允许移动
link 只允许打开链接
copylink 运行复制和打开链接
copymove 复制和移动
linkmove 移动和打开链接
all 都允许
前端存储:
cookie
cookie存储是html4的，一个网站共享一套cookie，cookie的值是由程序员自己定义的，
一个文件大小不超过4kb，每个网站能存储20个左右，再不给cookie设定时间，浏览器关闭就会消失，
如果给时间，则一定时间内就会过期，cookie的值可以携带到网络里传输。
使用场景:记录用户角色，相当于名片，记录是否参与过投票，
使用方式
document.cookie
expores设置cookie存储时间
列如
var t = new Date()
t.setDate(t.getDate() + 1)
document.cookie = "user=lisi num=99 expires=" + t
// document.cookie = "age=19 num=99"
//document.cookie = "user=xx"
alert(document.cookie)
多次给cookie复制不会被覆盖，但是属性相同就会覆盖，存储日期必须为date类型

html5本地存储：
sessionStorage会话存储：存储在本地浏览器下，浏览器关闭会自动消失
localStorage本地存储，存储在本地浏览器下，除非程序员手动删除，否则一直存在
属性和方法
clear()清空数据
key()遍历数据
getltem(key)获取数据
setltem(key,value)修改属性
removeltem(key)删除数据
应用场景
sessionStorage:用作于多个表单存储，记录当前游戏关卡的分数，
localStorage：存储当前登录人的信息，判断状态值，购物车
cookie,sessionStorage,localStorage区别
1.cookie存储4kb,sessionStorage和localStorange看磁盘大小
2.都是存储在客户端，cookie可以发送服务端
3.cookie有过期时间，sessionStronge浏览器关闭会消失，localstorange除非手动删除

web database:前端数据库
database数据库可以指定以空间大小，存储在浏览器端，类似本地数据库存储，存储是多行多列值
用sql语句写作
sql语法：
添加：insert into表名(字段1，字段2).values(值1，值2)

修改：
update 表名 set修改的字段1=值1，字段2=值2 where字段2=值2
删除：
delete from 表名 wher字段1=值1
查询：
select *from表名 where字段1=值1，
属性和方法
openDatabese(数据库的名字，版本，说明，大小)
transaction(执行函数,错误函数，成功函数)执行事务提交和回滚的函数
execteSql(sql语句,参数，成功函数，失败函数)执行sql语句
result.rows.length获得信息的条数
result.rows.item(0)获得第几条数据
result.rows.item(0)[字段名]获得属性信息

浮动
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 2px solid red;
        }
        .box div{
            width: 100px;
            height: 100px;
            float: left;
            margin: 25px;
            background-color: greenyellow;
        }
    </style>

    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
绝对定位
        *{margin: 0;padding: 0;}
        .center{
            margin: 0 auto;
            width: 500px;
            height: 500px;
            border: 1px solid black;
            position: relative;
        }
        .left_top{
            height: 50px;
            width: 50px;
            border: 1px solid red;
            position: absolute;
            top: 10px;
            left: 10px;
        }
        .left_bottom{
            height: 50px;
            width: 50px;
            border: 1px solid red;
            position: absolute;
            bottom: 10px;
            left: 10px;
        }
        .right_top{
            height: 50px;
            width: 50px;
            border: 1px solid red;
            position: absolute;
            top: 10px;
            right: 10px;
        }
        .right_bottom{
            height: 50px;
            width: 50px;
            border: 1px solid red;
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="center">
        <div class="left_top"></div>
        <div class="right_top"></div>
        <div class="left_bottom"></div>
        <div class="right_bottom"></div>
    </div>
</body>
</html>

html5语法介绍