HTML5目录
一,day one:
1.1,HTML5简介
-
特点:新版本的HTML语言, 约等于HTML + CSS + JS
-
优势:跨平台,快速迭代,降低成本,导流入口多,分发效率高
-
新特性:
-
用于绘画的 canvas 元素
-
用于媒介回放的 video 和 audio 元素
-
对本地离线存储的更好的支持
-
新的特殊内容元素,比如 article、footer、header、nav、section
-
新的表单控件,比如 calendar、date、time、email、url、search
-
1.2,状态标签
-
meter:显示已知范围的标量值/分数值 <meter value="38" min="33" max="43">
-
value:当前的数值
-
min:值域的最小边界值,默认为0
-
max:值域的上限边界值,默认为1
-
low:低值区间的上限值
-
high:定义了高值区间的下限值
-
optimum:这个属性用来指示最优/最佳取值
-
-
progress:显示一项任务的完成进度 <progress value="11" max="22">
-
max:共需要完成多少工作
-
value:已完成的工作量.,若无则不确定完成量
-
1.3,语义化标签
-
好处:让更语义化,结构化的代码标签,代替无意义的div标签,提升了网页的质量和语义
-
分类:
-
<hgroup></hgroup> :网页 / 标题,多个h1~6则放入其中,
-
<header></header> :多个h!~6用hgroup抱裹,还有其它数据,则再用header包裹
-
<nav></nav> :页面的导航链接区域
-
<section></section> :文档中的节或段 ,单独的模块
-
<footer></footer> : 网页页脚或任意 section 的底部部分,譬如:作者,相关文档链接,版权资料
-
<article></article> : 一个在文档,页面或者网站中自成一体的内容,独立文章
-
<aside></aside> : article中为主要内容的附属信息:相关资料、标签、名次解释等,article外可做侧边栏,分类导航,日志链接
-
1.4,Html5之前的表单
标签 | 属性 | 标签 | 属性 | ||
---|---|---|---|---|---|
from | action:服务器地址(接口) name:必须存在,获取表单 | select | 下拉框 selected:选中 | ||
fieldset | 表单分组 | optgroup | 分组 label:组名 | ||
legend | 指定组名 | option | 子项 multiple="multiple" | ||
<from><fieldset>....<legend>爱好 ..... | <select><optgroup>.....<option>.... | ||||
input |
| textarea
button
|
文本域 属性name
|
1.5,HTML5表单
表单格式 | 表单属性 | 表单验证反馈 | |
---|---|---|---|
|
| validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true,一种验证失败返回false node.addEventListener("invalid",fn1,false); valueMissing : 输入值为空时返回true typeMismatch : 控件值与预期类型不匹配返回true patternMismatch : 输入值不满足pattern正则返回true tooLong : 超过maxLength最大限制返回true rangeUnderflow : 验证的range最小值返回true rangeOverflow : 验证的range最大值返回true stepMismatch : 验证range 的当前值 是否符合min、max及step的规则返回true customError 不符合自定义验证返回true setCustomValidity 关闭验证 formnovalidate属 |
-
列表标签:
-
datalist,包含一组option元素---表示其表单控件的可选值,它的id必须要和input中的list一致
-
details:ui小部件,用户可以从其中检索附加信息,open属性来控制附加信息的显示与隐藏
-
summary:用作 一个<details>元素的一个内容摘要(标题)
-
-
注释标签:ruby/rt: 展示文字注音或字符注释。
-
标记标签:marK:着重
-
html5新增规范: sessionStorage localStorage WebSocket
canvas是HTML5的一部分,不能动态渲染,HTML作为Flash的替代技术出现
二,day two
2.1,canvas标签
-
特点:HTML5 新增的元素,用于绘制图形,创建动画,默认具有高宽(150/300px)
-
替换:IE9之前的IE浏览器不支持canvas,会显示canvas标签内内容,支持则会覆盖标签内其它内容
-
属性:width height //只会影响画布,不会影响内容,CSS都会影响,不建议使用
2.2,渲染上下文
window.onload=function(){
var canvas = document.querySelector("#test"); //多个返回唯一的第一个元素
if(canvas.getContext){
var ctx = canvas.getContext("2d"); //获取画布的2d上下文
ctx.save(); //栈,压入默认色,黑色,一次save压入一次,没有save多个s..S..则下盖上
//样式+颜色
ctx.beginPath();
//路径绘制
ctx.restore(); //从save压入颜色,依次放出,一次放一,覆盖原色
}//上述三个依次循环
}
<canvas id="test" width="300" height="300">
<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span> //不显示
</canvas>
2.3, 绘制矩形
-
ctx.fillRect(x, y, width, height):绘制一个填充的矩形(填充色黑色) 无单位
-
ctx.strokeRect(x, y, width, height):绘制一个矩形的边框(实心黑色) 无单位
-
ctx.clearRect(x, y, width, height):清除指定矩形区域(完全透明)无单位
2.4,样式和颜色
-
ctx.fillStyle:图形的填充颜色 (写在绘制矩形前)
-
ctx.strokeStyle:图形轮廓的颜色,默认黑色
-
ctx.lineWidth:绘线的粗细,必须为正数,默认1.0,无单位
-
ctx.lineCap:“butt/round/square” 方/圆/矩形 线条两端的展现形式
-
ctx.lineJoin:“round/bevel/miter” 圆/斜/直角 线条与线条间接合处的样式,默认 miter
2.5,绘制路径:
-
ctx.beginPath():新建一条路径, 若无,则下一条路径填充颜色红,上一个依然会填充红
-
ctx.moveTo(x, y):设置起点,通常用于canvas初始化或者beginPath()调用后
-
ctx.lineTo(x, y):绘制一条从当前位置到指定x以及y位置的直线
-
ctx.closePath():闭合路径,(先设置样式+颜色,在设置起点+转向,在填充+边框,最后闭合)
-
ctx.stroke():通过线条来绘制图形轮廓 ,不会自动调用closePath(),手动闭合
-
ctx.fill():填充路径的内容区域,生成实心的图形,自动调用closePath(),自动闭合
---beginPath---> 二次 三次
2.6,绘制图形
-
ctx.rect(x, y, width, height):矩形,自动重置默认坐标
-
ctx.arcTo(x1, y1, x2, y2, radius):圆弧,(x1 y1)出发,方向(x2 y2),不一定到达
-
ctx.arc(x, y, radius, startAngle, endAngle, true/false):绘制圆形,半径--(Math.PI/180)*degrees,true--顺时针
-
上述几个的特点:需fill()/stroke(),用strokeStyle/..调整颜色,默认黑
-
ctx.quadraticCurveTo(cp1x, cp1y, x, y):二次贝塞尔,控制点+结束点,起始点为moveTo指定点
-
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y):三次贝塞尔,控制点1+控制点2+结束点,起始点为moveTo指定点
2.7,图形变换
-
ctx.translate(x, y):移动 canvas的原点,是累加的
-
ctx.rotate(angle):1度=Math.PI/180,顺时针方向,中心点是canvas的原点,是累加的
-
ctx.scale(x, y):缩放,正值,大于1.0表放大,.5,增减像素数目,缩放像素大小,是累加的
----》 --下述渐变代码图片---》
2.8,图片
-
ctx.drawImage(image, x, y, width, height):传入图片,image/canvas 对象,起始坐标,缩放的大小
-
ctx.createPattern(image, "repetition" ):设置背景,图像源,"repeat/no-repeat/repeat-x/repeat-y"
-
x=ctx.createLinearGradient(x1, y1, x2, y2):渐变,起点,终点
-
x.addColorStop(position, color) :0.0 ~1.0 渐变中颜色所在的相对位置
-
x.createRadialGradient(x1, y1, r1, x2, y2, r2): 原点+半径->圆 原点+半径->圆
var canvas = document.querySelector("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
var gradient = ctx.createRadialGradient(150, 150, 50, 150, 150, 100)
gradient.addColorStop(0,"red");
gradient.addColorStop(0.5,"yellow");
gradient.addColorStop(0.7,"pink");
gradient.addColorStop(1,"green");
ctx.fillStyle=gradient;
ctx.fillRect(0,0,300,300);
}
}
2.9,文本
渲染文本
-
ctx.fillText(“ text ”, x, y) :填充指定的文本,文本内容,地点
-
ctx.strokeText(“ text “, x, y):绘制文本边框
bottom middle top
文本样式
-
ctx.font =“ 10px sans-serif ”:设置文本样式,此处为默认值,字体大小缺一不
-
ctx.textAlign = “ value ”:可选值 left, right center 基于fillText设置的x值,文本以x为对称,在其左/右
-
textBaseline = “ value ”:top/middle/bottom 文本基线在文本块的顶部/中间/底部
-
measureText(“ obj ”) 方法返回一个 TextMetrics 对象,包含关于文本尺寸的信息(例如文本的宽度)
canvas中文本水平垂直居中
阴影
-
shadowOffsetX/Y = float:默认0,设定阴影在 X 和 Y 轴的延伸距离
-
shadowBlur = float: 设定阴影的模糊程度,默认为 0 ,值不跟像素数量挂钩,也不受变换矩阵的影响,
-
shadowColor = color :设定阴影颜色,默认透明黑
三,day three
3.1,像素操作
-
ctx.getImageData(sx, sy, sw, sh):获取ImageData对象,坐标,宽高
-
ctx.putImageData(ImageData, dx, dy):像素数据写入
-
ctx.createImageData(width, height):创建一个ImageData对象,新对象的宽度/高度,默认透明色
-
ctx.globalAlpha = value:全局透明度的设置,0.0~1.0 默认1.0
ImageData对象:
-
属性-width/height:横向/纵向像素点的个数,单位是像素
-
属性-data数组:存储每一个像素点的rgba消息, (R/G/B)/A:0~255(黑色到白色/透明到不透明),rgba(1,1,1,2)
3.2,覆盖合成
-
ctx.globalCompositeOperation="source-over"; 新--源 旧--目标
-
source-over:默认,源在上面,新的图像层级比较高
-
source-in:只留下源与目标的重叠部分(源的那一部分)
-
source-out :只留下源超过目标的部分
-
source-atop:砍掉源溢出的部分
-
destination-over:目标在上面,旧的图像层级比较高
-
destination-in:只留下源与目标的重叠部分(目标的那一部分)
-
destination-out:只留下目标超过源的部分
-
destination-atop:砍掉目标溢出的部分
-
-
canvas.toDataURL:将画布导出为图像,F12,Console,复制地址,查找
window.onload=function(){
var canvas = document.querySelector("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.fillStyle="pink";
ctx.fillRect(50,50,100,100);
ctx.globalCompositeOperation="source-out";
ctx.fillStyle="green";
ctx.fillRect(100,100,100,100);
}
}
3.3,事件操作
-
ctx.isPointInPath(x, y):判断在当前路径中是否包含检测点 ,x/y 坐标
window.onload=function(){
var canvas = document.querySelector("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,50,0,360*Math.PI/180);
ctx.fill();
ctx.beginPath();
ctx.arc(200,200,50,0,360*Math.PI/180);
ctx.fill();
canvas.onclick=function(ev){
ev = ev||event;
var x = ev.clientX - canvas.offsetLeft;
var y = ev.clientY - canvas.offsetTop;
if(ctx.isPointInPath(x,y)){
alert(123);
}}}}
备注:拖拽,即08签名未看 13 15 16 19 22 23 24 25 27 28
window.onload=function(){
var canvas = document.querySelector("#test"); //多个返回唯一的第一个元素
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.fillRect(0,0,100,100); //填充的矩形
ctx.strokeRect(100.5,100.5,100,100) //带边框的矩形
var test = document.createElement("div");
test.id="test";
document.body.appendChild(test);
test.style.background="pink";
}
}