Canvas画板

知识点

鼠标事件
document.onmousedown 按下鼠标
document.onmousemove 鼠标动了
document.onmouseup 松开鼠标
写代码的精髓就是有事log一下
client X client Y 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平和垂直坐标。
鼠标左键button:0 鼠标中键button:1 鼠标右键button:2
一定不要忘了position：relative 和absolute；
left和top后面要加个空格在加上变量，—postion要和left或top放在一个“”里
API
别人提供给你调用的东西就API

document.getElementById
document.createElement
newDiv.style
document.onmousedown
document.onmouseup

上面的都是API
canvas
canvas是inline-block元素
1
<canvas id="draw" height= 500 width= 500></canvas> //调整canvas的大小
用css如果放大，会等比例缩放，不建议用css控制canvas的初始宽高
canvas画图onmousedown onmousemove onmouseup必须是跟着canvas；
canvas的API
getContext(‘2d’)获取2d平面的上下文
ctx.fill就是填充；ctx.stroke就是描边
ctx.fillStyle=’green’;画出来的颜色，先写fillStyle
ctx.fillRect(10,10,100,100); ctx.fillRect填充出一个矩形出来，前两个10是填充矩形的左上角两个坐标，前两个100是填充矩形的右下角两个坐标
strokeRect，绘制一个矩形的边框； strokeStyle 绘制矩形边框的颜色
clearRect，清除一个矩形；
除了矩形，其他都要beginPath()为开头
context.arc(150,150,10,0,MATH.PI*2)画出一个圆心坐标为(150,150)半径为10，从0到360度的圆 PI=3.1415926等于180
canvas画线
context.beginPath() 开始画画
context.moveTo(0,0) 起点
context.lineWidth=5 线的宽度
context.lineTo(x,y) 终点
context.stroke()
context.closePath() 结束画画
页面宽度document.documentElement.clientWidth，页面高度document.documentElement.clientHeight
window.onresize 用户重新调整窗口，尽量一个按钮做一件事
WAP是一种语言，是一种简化的HTML
手机;
页面缩写
双击放大

移动端是怎么做适配的？

meta viewport

1	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

媒体查询
更具查询结果选择不同的css样式

<style>
@media (max-width: 500px) {
    ......
}
</style>

动态 rem方案
rem是通过根元素的字体大小来设置元素的宽高的,以此来达在不同屏幕尺寸中等比例缩放达到完美的展现效果
1rem = 根元素字体大小
1
2
3
4
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth: 320px; 为设计稿的宽度

阻止手机模拟宽度 980px

<meta name="viewport" content="width=device-width(页面宽度等于设备宽度), use-scalable=no(用户是否可以缩放),initial-scale=1.0(初始缩放比例1:1),maximum-scale=1.0(最大缩放比例1:1),minimum-scale=1.0(最小缩放比例1:1)">

手机的事件
ontouchstart开始摸屏幕
ontouchmove边摸边动
ontouchend不摸屏幕
if(document.body.ontouchstart==undefined)特性检测
手机支持多指触控
电脑：clientX 手机touches[0].clientX
电脑：clientY 手机touches[0].clientY
开发者工具模拟手机，直接刷新页面，
document.body.ontouchstart！==undefined不会从false变为true

transform: scale(1.2);变大1.2倍，transition-duration:0.3s;变形过渡0.3s
document.body.ontouchstart=function(a){
```
a.preventDefault()
```
}
禁止页面滚动
overflow: hidden;禁止出现滚动条

知识点

Comments