*** 固定格式
html,body{height: 100%;overflow: hidden;} //取消滚动条
html,body,h1,h2,h3,h4,h5,h6,p,ul,li{margin: 0px;padding: 0px;font: 14px "微软雅黑";}
a{text-decoration: none;display: block;}
li{list-style: none;}
img{display: block;}
*{margin:0; padding:0;}
div 居中
上级元素 相对定位
1: position:relative;
2: div{
position:absolute;//元素定位后 大小由内容撑开
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}
清除浮动
.clearfix{*zoom:1}
.clearfix:after{content:'',display:block,clear:both}
背景图片居中
background-position:50% 50%
li 排成一行并居中 不使用float
父元素：position:absolute; left:0 right:0; text-align:center
li : display:inner-block
新增属性：
classList 控制读写class列表 add remove toggle 例: class="class1 class2 class3 ..."
dataset 读写自定义属性 以data-* #id.dataset.*控制 data-rzh-name='' #id.dataset.rzhName
contenteditable='ture/false' 文字是否可编辑
document.compatMode 返回当前处于什么渲染模式 正常模式 怪异模式
新增标签
hgroup
header
nav
section
footer
盒模型上 默认值
width auto 只有设置boder-style的时候设置width的宽度才有意义
margin padding 0 (垂直水平居中的时候 特意把margin值调为auto)
left top auto
canvas画布
<canvas id='tutorial'> </canvas>
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
移除canvas
canvas.remove();
canvas=null;
画笔画矩形()
//填充的矩形
ctx.fillRect(10,10,100,100);//不要加单位
前两个参数是：原点 后两个参数是：长度和宽度
//边框矩形
/*strokeRect定义产生’一‘像素的边框
但是ctx.strokeRect(100,100,100,100)会产生两像素的边框
因为她会在100,100 ‘向内’‘向外’各0.5像素画，从99.5--100.5
但css中没有小数 故此时0.5变成1所以会产生两像素的边框
如果想只产生 1像素边框用ctx.strokeRect(100.5,100.5,100,100) 从100--101
*/
ctx.strokeRect(100,100,100,100)
// 画矩形边框
ctx.clearRect(100,100,100,100) //会产生一个跟底色一样的矩形 一般用于清除整个canvas
//画笔颜色
ctx.fillStyle='deeplink'//填充颜色
ctx.strokeStyle='deeplink'//线条颜色
ctx.lineWidth=10 //画笔宽度 默认值为1像素
// 样式 跟线有关
ctx.lineJoin='bevel'//斜角
ctx.lineJoin='round'//圆角
ctx.lineJoin='miter'//直角 默认
/*
划线
*/
ctx.moveTo(10,10);//起始点
ctx.linTo(10.50);//第一个终点
ctx.linTo(50.50);//第二个终点
ctx.linTo(50.10);//第三个终点
ctx.stroke();//划线 不会自动合并路径 需要配合closePath()
ctx.fill()//填充 会自动合并路径
ctx.closePath();//闭合
ctx.beginPath();//清空路径容器
//绘制路径 fileRect strokeRect 的分解
ctx.rect(10,10,100,100)
ctx.fill();
ctx.stroke();
//线的末端的样式
ctx.lineCap="butt"
ctx.lineCap="round"
ctx.lineCap="square"
// 一般的格式
1：ctx.save()//样式进栈
2：// 样式
ctx.fileStyle='pink';
。。。
3：ctx.beginPath();//路径有关系
4：//路径 路径容器
ctx.moveTo();
ctx.lineTo();
ctx.stroke()
//绘制时使用的是样式容器中的样式 跟样式栈中无关 restore会把栈中的样式弹出到样式容器中
5：ctx.restore();//样式出栈
//画圆 画弧
角度与弧度的js表达式:radians=(Math.PI/180)*degrees。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），
从startAngle开始到endAngle结束，
startAngle, endAngle 必须写弧度 270*Math.PI/180
按照anticlockwise给定的方向（默认为顺时针）来生成。
ture：逆时针
false:顺时针
arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧
肯定会从(x1 y1) 但不一定经过(x2 y2);(x2 y2)只是控制一个方向
只有两个控制点所有需要先使用moveTo来确定第一个点，配合arcTo的两个点，
共三个点确定一个角，然后用半径的圆从中心线向角的方向移动，得到一个弧度
二次贝塞尔
quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
起始点为moveto时指定的点
三次贝塞尔
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
起始点为moveto时指定的点
//变换
translate(x, y)
我们先介绍 translate 方法，它用来移动 canvas的原点到一个不同的位置。
translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量，
*** 在canvas中translate是累加的
rotate(angle)
这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法
*** 在canvas中rotate是累加的
scale(x, y)
scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。
值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。
缩放一般我们用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。
css像素是个抽象概念 放大(缩小)css 单位像素的面积 固定区域内像素的个数变少(变多)
*** 在canvas中scale是累称的
// 插入图片
var image = new Image();
image.src='';
drawImage(image, x, y, width, height)
image:图片
x,y :起始坐标
width,height:控制宽高
// 插图背景
createPattern(image, repetition)
image:图片
repetition:平铺
"repeat"
"repeat-x"
"repeat-y"
"no-repeat"
// 线性渐变
createLinearGradient(x1, y1, x2, y2)
x1,y1:起始点
x2,y2:终止点
// 径向渐变
createRadialGradient(x1, y1, r1, x2, y2, r2)
x1, y1, r1:圆心，半径
x2, y2, r2:第二个圆心半径
// 设置渐变颜色
gradient.addColorStop(position, color)
gradient:'createLinearGradient'或者'createRadialGradient'的返回值
position:参数必须是一个 0.0 与 1.0 之间的数值.
color:颜色
// 写字
fillText(text, x, y)
在指定的(x,y)位置填充指定的文本
strokeText(text, x, y)
在指定的(x,y)位置绘制文本边框
font = value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法.
默认的字体是 10px sans-serif。
font属性在指定时，必须要有大小和字体 ***缺一不可
textAlign = value
value:left ,right ,center
这里的textAlign="center"比较特殊。textAlign的值为center时候
文本的居中是基于你在fillText的时候所给的x的值，
*** 也就是说文本一半在x的左边，一半在x的右边
textBaseline = value
top:文本基线在文本块的顶部。
middle:文本基线在文本块的中间。
bottom:文本基线在文本块的底部。
measureText
measureText('text') 方法返回一个 TextMetrics 对象，包含关于文本尺寸的信息（例如文本的宽度）
canvas中文本水平垂直居中
阴影(文本阴影&盒模型阴影)
shadowOffsetX = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，
它们默认都为 0。
shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，
它们默认都为 0。
shadowBlur = float
shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
shadowColor = color(必需项)
shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。
// 得到场景像素数据
getImageData():获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据
width:图片宽度，单位是像素
height:图片高度，单位是像素
data:Uint8ClampedArray类型的一维数组，
// 在场景中写入像素数据
putImageData()方法去对场景进行像素数据的写入。
// 创建一个ImageData对象
ctx.createImageData(width, height);
width : ImageData 新对象的宽度。
height: ImageData 新对象的高度。
var imgdata = ctx.getImageData(0,0,canvas.width,canvas.height);
//获取x*y范围内的一个像素点的值
function getPxInfo(imgdata,x,y){
var color = [];
var data= imgdata.data;
var w = imgdata.widht;
var h = imgdata.height;
//r
color[0] =data[(y*w+x)*4];
//g
color[1] =data[(y*w+x)*4+1];
//b
color[2] =data[(y*w+x)*4+2];
//a
color[3] =data[(y*w+x)*4+3];
return color;
}
// 设置x*y范围内的像素为color的值
function setPxInfo(imgdata,x,y,color){
var data= imgdata.data;
var w = imgdata.widht;
var h = imgdata.height;
//r
data[(y*w+x)*4]=color[0] ;
//g
data[(y*w+x)*4+1]=color[1];
//b
data[(y*w+x)*4+2]=color[2] ;
//a
data[(y*w+x)*4+3]=color[3] ;
}
// 将画布导出为图像
toDataURL()这个是canvas元素上的方法
// 时间操作
ctx.isPointInPath(x,y)
判断当前路径中是否包含检查点
x,y 为检查点的坐标
注意：只能作用于最新画出的canvas图像
视频
拖拽
拖拽元素要定位：position:absolute
拖拽思路
1：拿到鼠标点击元素时元素一开始的位置
2：拿到鼠标移动距离
鼠标点击是的位置
鼠标移动时，实时的位置
鼠标移动实时的距离= 鼠标移动时，实时的位置 - 鼠标点击是的位置
3：确定移动后元素的位置
元素开始位置+移动距离
表单新增属性：
placeholder 提示信息
required 必填项
pattern 正则验证
formaction 在submit里定义提交地址 同一个表单提交到不同地方
<input type='submit' value='提交' formaction='http://www.baidu.com'></input>
事件
invalid 验证失败出发事件
var node=document.querySelector('id')
node.addEventListener('invalid',function(){
console.log(this.validity);
})
js 兼容性问题
ev||event
鼠标滚轮
ie/chrom: onmousewheel (DOM0)
event.wheelDelta
上：120 下：-120
//火狐里必定要用DOM2的形式绑定 addEventListener
firefox: DOMMouseScroll
event.detail
上：-3 下：3
兼容版：
function fn(ev){
ev=ev||event;
var dir='';
if(ev.wheelDelta){
dir=ev.wheelDelta>0?'up':'down';
}
if(ev.detail){
dir=ev.detail<0?'up':'down';
}
}
事件绑定
DOM2 可以累加
if(elem.addEventListener){//没有‘on’ 正序 this 绑定到elem
elem.addEventListener('click',function(){})
}else{//有‘on’ 倒叙 this 绑定给window
elem.attachEvent('onclick',function(){})
}
滚动条 ：L=document.getElement.scrollLeft||document.body.scrollLeft 元素滚动的距离
offsetParent
事件流：捕获 目标处理 冒泡
捕获，冒泡 前提条件是有dom嵌套
禁止默认行为
DOM0: return false
DOM2: if(ev.preventDefault){
ev.preventDefault();
}
实战
css 包含块：父节点是否有定位
parentNode:父节点
offsetparent：相当于css中的包含块：用来得到绝对位置
本身定位为fixed
==> offsetParent:null（不是火狐）
offsetTop和offsetLeft也是参照于body的
==> offsetParent:body（火狐）
本身定位不为fixed
父级没有定位
==> offsetParent:body
父级有定位
==> offsetParent:定位父级
*** 获取相对位置
*** *** getBoundingClientRect：一个元素四个角！的相对位置
getBoundingClientRect + 滚动条滚动时元素滚动的距离—> 绝对位置
代表元素border-box的尺寸
height
width
元素左上角的相对位置
left
top
元素右下角的相对位置
right
bottom
元素本身的
clientWidth: padding 可视区域
offsetWidth: 可视区域+boder宽度 border-box
*** 视口的大小:document.documentElement.clientWidth
元素相对body的
offsetTop
offsetLeft
鼠标
clientX
clientY
滚动条
scrollTop
scrollLeft
采坑：
for循环的匿名函数是异步执行
使用闭包解决
for(var i=0;i<5;i++){
var tip = function(){ //这样把匿名函数自我执行的时候赋值给一个变量，那么圆括号是可以去掉的
alert(i);
}(i);
}
无效的多次执行某个函数: 只让最后一次的生效
var timer = 0;
id.addEventListener('DOMMouseScroll',function(ev){
ev=ev||event;
clearTimeout(timer);
timer = setTimeout(function(){
fn(ev);
},200)
})
扫一扫
1272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
