前端学习---HTML5
HTML5目录
一，day one：
1.1，HTML5简介
1.2，语义化标签
1.3，canvas(画布) 简介
1.4，渲染上下文
二，day two
2.1， 绘制矩形
2.2，样式和颜色
2.3，绘制路径
2.4，绘制图形
2.5，图形变换
2.6，图片
2.7，文本
三，day three
3.1，像素操作
3.2，覆盖合成
3.3，事件操作
一，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：显示已知范围的标量值/分数值
-
value:当前的数值
-
min:值域的最小边界值，默认为0
-
max:值域的上限边界值，默认为1
-
low:低值区间的上限值
-
high:定义了高值区间的下限值
-
optimum:这个属性用来指示最优/最佳取值
-
-
progress：显示一项任务的完成进度
-
max：共需要完成多少工作
-
value：已完成的工作量.，若无则不确定完成量
-
1.3，语义化标签
-
好处：让更语义化，结构化的代码标签，代替无意义的div标签，提升了网页的质量和语义
-
分类：
-
：网页 / 标题，多个h1~6则放入其中，
-
：多个h!~6用hgroup抱裹，还有其它数据，则再用header包裹 -
：页面的导航链接区域
-
：文档中的节或段 ，单独的模块
-
： 网页页脚或任意 section 的底部部分，譬如：作者，相关文档链接，版权资料
-
： 一个在文档，页面或者网站中自成一体的内容，独立文章
-
： article中为主要内容的附属信息：相关资料、标签、名次解释等，article外可做侧边栏，分类导航，日志链接
-
1.4，Html5之前的表单
| 标签 | 属性 | 标签 | 属性 | ||
|---|---|---|---|---|---|
| from | action:服务器地址（接口） name:必须存在，获取表单 |
select | 下拉框 selected：选中 | ||
| fieldset | 表单分组 | optgroup | 分组 label：组名 | ||
| legend | 指定组名 | option | 子项 multiple="multiple" | ||
| 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:用作 一个
元素的一个内容摘要（标题）
-
-
注释标签：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压入颜色，依次放出，一次放一，覆盖原色
}//上述三个依次循环
}
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";
}
}