制作手机画板Demo重要组成部分

制作手机画板Demo重要组成部分

1. touchstart开始触摸点
2. touchmove触摸移动点
3. touchend触摸结束点

touch属性

• 概要

一个 TouchList，其会列出所有当前在与触摸表面接触的 Touch 对象，不管触摸点是否已经改变或其目标元素是在处于 touchstart 阶段。

• 语法

var touches = touchEvent.touches;

• 返回值是touches

一个 TouchList，其会列出所有当前在与触摸表面接触的 Touch 对象，不管触摸点是否已经改变或其目标元素是在处于 touchstart 阶段。

• 如何调取touch的属性

$(Element).on('touchstart',function(event){
     console.log(event)
}

someElement.addEventListener('touchstart',function(event){
    console.log(event)
})

touches[0]Touch返回值主要属性介绍

• clientX,clientY 是相对于浏览器窗口的X,Y位置
• screenX,screenY 是相对于屏幕的X,Y位置
• pageX,pageY 是相对于页面的X,Y位置
• 调用方法如下：

someElement.addEventListener('touchstart',function(event){
    let {clientX,clientY} = e.touches[0] //ES6新增语法糖
    //下边两行代码等同于上边代码
    let clientX = e.touches[0].clientX
    let clientY = e.touches[0].clientY
})

Canvas

• Canvas默认display:inline 需要更改为display:block.

• Canvas默认有宽高比例,因此需要手动设置宽高，并且不能在CSS中添加，因为会不等比的缩放它。最好是在html中直接添加

JavaScript相关属性

Element.setAttribute()

设置指定元素上的一个属性值。

如果属性已经存在，则更新该值; 否则将添加一个新的属性用指定的名称和值。

要获取属性的当前值，使用 getAttribute();

要删除一个属性，调用removeAttribute()。

Element.clientWidth

Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。需要这样调用它document.documentElement.clientWidth

详细的介绍地址：阮一封

Javascript中的querySelector、style、getComputedStyle方法

querySelector()得到的是<第一个><满足选择条件>的元素

querySelecorAll()返回的就是一个数组了，包含了<满足选择条件的>所有元素，所以对于querySelecorAll()返回的元素不能直接操作，否则就会报错。需要在在后边加[0]

style<只能>获取到内嵌样式的值即（style="margin-left: 0; "）style属性中的css样式，这就是style的地盘。那getComputedStyle()那就不一样了简直是内外通吃，只要css样式被应用，其值就能被getComputedStyle()取到,那style岂不是小弟了嘛，不不，getComputedStyle()虽然取值功夫相当了得，但要想设置css样式，那对不起他做不到了，这就要靠style

setAttribute("width", "600")DOM添加CSS属性

parseInt()该函数从待转换的字符的第一个字符开始逐个读取字符,直到遇到非数字.然后将读取到的字符转换成数字...

Element.classList获取classname 列表