我的canvas画板项目

canvas的宽高

canvas的画布大小是由宽高决定的（html中）。

canvas的特性很像img。

css将其宽或高变大→整体按比例缩放→不建议用css控制canvas的初始宽高。

canvas的位置特性

现象

如上图，当鼠标点击绿色的画布左上角（left：0，top：0）时圆圈出现在如图的位置

原因

html中，body属性具有20px的margin，此时当鼠标点击绿色的画布左上角（left：0，top：0）时，获取到的位置是20,20.但是当canvas画圆圈时，确实按照canvas本身的元素来的，所以成了canvas（20,20），body（40,40）

使用js做控制时的注意事项

需求

canvas上的橡皮擦按钮→点击一下→变为画笔按钮→再点击→变为橡皮擦

错误示范

千万不要这样做！

    var eraserEnabled = false;
    eraser.onclick = function(){
        eraserEnabled = !eraserEnabled
        if (eraserEnabled){
            eraser.textContext ='画笔'
        }else{
            eraser.textContext ='橡皮擦'
        }
    }
复制代码

错误原因

需要很精细的控制整个循环

解决办法

一个按钮只控制一件事情

正确示范

HTML:
<div class="actions" id="actions">
  <button id="eraser">橡皮擦</button>
  <button id="brush">画笔</button>
</div>

css:
.actions{position:fixed;top:0;left:0;}
.actionsx{position:fixed;top:0;left:0;}
.actions > #brush{display: none;}
.actionsx > #eraser{display: none;}
.actionsx > #brush{display: inline-block;}

js:
eraser.onclick = function(){
    eraserEnabled = !eraserEnabled
    actions.className = 'actionsx'
}
brush.onclick = function(){
    eraserEnabled = !eraserEnabled
    actions.className = 'actions'
}
复制代码

思路

写两个按钮→通过css样式（display:none）控制是否出现→通过js控制css的类名(.className)

优点

平铺直叙，不需要仔细考虑判断过程，减少bug的出现

canvas适配移动端

meta:vp

特性检测

    if(document.body.ontouchstart === null){
    }else(document.body.onmousedown === undefined){
    }
复制代码

更改事件名和属性名称

1. 使用console.log()打印出函数本身含有的信息

    canvas.onmousedown = function(aaa){  
        console.log(aaa)
    }
复制代码

2.更改

使用icon更加美观

效果图

思路

写好变化后的css样式→给样式加className→用js控制点击时classList加入新name

代码

css:
.actions > svg.active{transition:all 0.6s;width:4em;height:4em;fill:yellow;}

js:
eraser.onclick = function(){
    eraser.classList.add('active')
    pen.classList.remove('active')
}
pen.onclick = function(){
    pen.classList.add('active')
    eraser.classList.remove('active')
}
复制代码

禁止canvas画布整体拖动

使用css绝对定位即可（使用js有可能事件互相干扰）

position:fixed;
left:0;
top:0;
复制代码

局域网调试

优点：不需要借助github 直接在手机上调试移动端

步骤

1. 找到wifi下ipv4的地址

2. 将网址和手机的：8080前加上ipv4地址

手机端为192.168.43.206:8080

console.log()大法排查bug

可以结果任何bug！！任何bug！！！任何！！

1. 先猜测是哪里出了问题
2. 将所有变量print出来（至少至少打印10个）
3. 如果还有问题就继续加变量，继续打印，直到找出明显错误
4. 如果打出了object等看不到内容，就使用

JSON.stringify()
复制代码

转载于:https://juejin.im/post/5cb53245e51d456e250004e7