1.功能描述
实现画画功能，并可切换画笔颜色、细条粗细。可保存、清空画板。
2.思路
创建画板——》监听鼠标（触屏）事件——》绘制路线
3.具体操作
3.1 创建画板
通过canvas创建画板
<canvas id="xxx" width=300 height=300></canvas>
3.2 监听鼠标（触屏）事件
监听鼠标（触屏）事件，当鼠标按下（触屏）时进行绘画，根据鼠标（手指）移动路线绘制，松开鼠标（手指离屏）时停止绘画。
canvas.ontouchstart = function(aaa){
var x = aaa.touches[0].clientX;
var y = aaa.touches[0].clientY;
using = true;
if(isEraser){
context.clearRect(x-5,y-5,10,10);
} else{
lastpoint = {"x":x,"y":y};
}
}
canvas.ontouchmove = function(aaa){
var x = aaa.touches[0].clientX;
var y = aaa.touches[0].clientY;
if(using == false){return;}
if(isEraser){
context.clearRect(x-5,y-5,10,10);
} else{
var newPoint = {"x":x,"y":y}
//drawCircle(x,y);
drawLine(lastPoint.x,lastPoint.y,newPoint.x,newPoint.y);
lastPoint = newPoint;
}
}
canvas.ontouchend = function(){
using = false;
lastPoint = {"x":undefined,"y":undefined};
}
3.3 绘制路线
通过点与线的连接，实现绘画功能。
function drawLine(x1,y1,x2,y2){
context.beginPath();
context.moveTo(x1,y1);
context.lineWidth = lineWidth;
context.lineTo(x2,y2);
context.stroke();
context.closePath();
}
4.相关知识点
4.1 js
监听鼠标点击事件
按下去鼠标 document.onmousedown =function(x){console.log(x)}
移动鼠标 document.onmousemove = function(y){console.log(y)}
松开鼠标 document.onmouseup = function(z){console.log(1)}
监听触摸事件（因为手机上没有mouse所以用touch）
开始触摸 canvas.ontouchstart = function(aaa){}
结束触摸 canvas.ontouchend = function(aaa){}
边摸边动 canvas.ontouchmove = function(aaa){}
通过特性检测得知是用mouse还是touch
-
方法1
如果设备支持 ontouchstart，结果是null
如果设备不支持ontouchstart，结果是undefined
-
方法2
移动端
‘ontouchstarts’ in document.body——》true手机端
‘ontouchstarts’ in document.body——》false特性检测
document.body.ontouchstart触屏设备
canvas.ontouchstart非触屏设备
canvas.onmousedown
touch时把当前所有touch事件都存到了touches中，所以从touches[0]中获取坐标
用div画画
首先获取鼠标在视图上的x、y，然后生成1个div，并设置div的样式，最后将div放到画板（div）中。即可打点。
缺点：元素画画只能画点，没办法连线。
用canvas画画
-
矩形
获取画板
var yyy =document.getElementById(‘xxx’);获取2d上下文
var context =yyy.getContext(“2d”);填充样式
context.fillStyle = ‘red’;填充、描边矩形
context.fillRect(0,0,100,100);描边样式
context.strokeStyle= ‘yellow’;描述矩形
context.strokeRect(10,0,100,100);清除
context.clearRect(50,50,60,60); -
画线
开始
context.beginPath();起点
context.moveTo(80,80);画线
context.lineTo(100,80);结束
context.fill(); -
画圆
开始
context.beginPath()画圆
context.arc(150,150,半径,开始角度,结束角度)结束
context.fill() 点与线连起来
出现第1个点第2个点的时候之间连个线，即mouseDown的时候为第1个点，mouseMove的时候为第2个点。并每次记录上1个点。
获取页面宽高
document.documentElement.clientWidth
document.documentElement.clientHeight
一个按钮只做一件事
让页面缩放
content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
in操作符
varhash = {a:1,b:2,c:3}
‘a’in hash——》true
‘d’in hash——》false
禁止滚动条 overflow:hidden
在移动端让canvas不移动 绝对定位 position:fixed; top:0; left:0;
