canvas画板总结

制作Canvas画板

画板预览

源码地址
canvas的使用查mdn文档就可以了
下面主要讲的是实现画板的思路，以及我的踩坑记录

先不用canvas标签

先用div，首先知道用户点了哪里
使用console.log调试

<div id="canvas"></div>

xxx.onClick = (e) => {console.log(e)//e.clientX//e.clientY
}

在点击的地方出现圆点

let div = document.createElement('div')
div.style.position = 'absolute'
div.style.left = e.clientX + 'px'
div.style.top = e.clientY + 'px'
div.style.border = '1px solid red'
div.style.weight = '5px'
div.style.height = '5px'
div.style.borderRadius = '50%'
div.style.backgroundColor = 'black'
xxx.appendChild(div)

把点连起来，点变成线
现在是直接操作dom（操作div的），性能差

改进：使用canvas。

<canvas id="canvas"></canvas>

canvas是inline元素
display: block;
再把宽高设置成页面这么大即可

var ctx = canvas.getContext("2d");ctx.fillStyle = "rgb(200,0,0)";ctx.fillRect (10, 10, 55, 50);

上面这个是canvas画出一个形状，前面两个参数是起始位置，后面两个是宽高

canvas的宽高是在一开始就确定的，

<canvas id="canvas" width="100" height="100"></canvas>

如果后面css还有宽高，就会覆盖这个宽高，但是就相当于缩放了，放大的话就会变模糊。所以最开始写宽高就会写好（用js获取用户屏幕的宽高）

var canvas = document.getElementById("canvas")
const mainWidth = parseInt(main.clientWidth * 0.95);
const mainHeight = parseInt(main.clientHeight );
canvas.width = `${mainWidth}`;
canvas.height = `${mainHeight}`;
canvas.style.width = `${mainWidth}px`;
canvas.style.height = `${mainHeight}px`;

注意：获取的是文档的宽高，获取body是不行的，因为body的高度是由内容撑起来的，没有内容，高度就没有

下面是做点击就打点的操作

canvas.onClick = (e) => {ctx.fillRect(e.clientX - 5, e.clientY - 5, 10, 10)
}

这个是canvas的api

变换鼠标事件
onClick->onmousemove
使用一个变量来看鼠标是否是按下，按下时鼠标移动就继续划线，鼠标松开时就不划线

let painting = falsecanvas.onmousedown = () => {painting = true
}
canvas.onmousemove = () => {painting = false
}
canvas.onClick = (e) => {if(painting === true) {ctx.fillRect(e.clientX - 5, e.clientY - 5, 10, 10)}
}

这样就实现了鼠标按下就画线，鼠标松开就停

画圆点

ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
ctx.stroke();

ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
ctx.arc(e.clientX, e.clientY,10, 0, 2 * Math.PI, false);

前两个参数是起始位置，第三个是半径，后面两个是角度

ctx.fill()//实心，填充颜色

再把边框去掉
ctx.strokeStyle = 'none'
现在就可以慢速的画了，为什么是慢速呢，因为是拼凑的，画快了就断掉了，当速度快一点时，就变成点的形状了

怎么样支持手机，但是手机没有鼠标事件，所以就要判断是手机还是pc。
js detect touch support

var isTouchDevice = 'ontouchstart' in document.documentElement;

判断isTouchDevice是true或者false，就能知道是手机还是pc

难点

这个在手机上是支持的，在电脑上是不支持的，就可以判断是手机还是电脑（搜了半天），（就是上面这个）

手机上ontouchstart就是触屏事件，参数e里面就是有touches，里面包含了我们需要的x和y（位置）
手机上就没有按下，起来的事件，就直接是触摸事件

现在是点，把点变成线就可以了
在canvas里面搜直线，这个是三角形，也就是三个点，画直线的画就要两个点就够了，去掉第三个点即可

//描边三角形ctx.beginPath();ctx.moveTo(125, 125);ctx.lineTo(125, 45);ctx.lineTo(45, 125);ctx.closePath();ctx.stroke();//上面的就是三个点，然后把三个点连起来

两个点连上就变成直线了，记住上一个点，然后连起来就好起来了

记住上一次的点，然后把现在的点和上一次的点连起来，就可以了，第一个点没有上一个点，所以从第二个点开始。

把线变粗
ctx.lineWidth = 10

难点

画出来的线又很粗糙

解决：js canvas line join
把line和line之间的链接变成圆弧
ctx.lineCap = "round"

整个画板的实现过程

获取位置->打点->连线->断断续续->记住上一个点连起来->粗糙->变成圆弧就不粗糙了

使用了flex布局

使用正则表达式来替换颜色，把颜色转化为不同的格式

const color = getComputedStyle(e.target).backgroundColor;
获取当前的颜色

用了一个伪类来在显示的时候添加边框

颜色的部分使用了<input type="color"></input>

橡皮檫部分是使用了ctx.globalCompositeOperation = "destination-out";
去mdn上查就能查到这个属性的作用

铅笔是ctx.globalCompositeOperation = "source-over";

这两个相互切换是使用了classList，首先给这个添加selected这个类，加上标签，然后再用forEach和indexOf来判断eraser和source-over确定是铅笔还是橡皮

画布的高度

const mainWidth = parseInt(main.clientWidth * 0.95);
const mainHeight = parseInt(main.clientHeight );
canvas.width = `${mainWidth}`;
canvas.height = `${mainHeight}`;
canvas.style.width = `${mainWidth}px`;
canvas.style.height = `${mainHeight}px`;

鼠标绘图

main.addEventListener("mousedown", (e) => {painting = true;lastX = e.offsetX;lastY = e.offsetY;ctx.beginPath();ctx.arc(lastX, lastY, ctx.lineWidth / 2, 0, 2 * Math.PI);ctx.closePath();ctx.fill();
});
main.addEventListener("mousemove", (e) => {if (painting) {ctx.beginPath();ctx.moveTo(lastX, lastY);ctx.lineTo(e.offsetX, e.offsetY);ctx.closePath();ctx.stroke();lastX = e.offsetX;lastY = e.offsetY;}
});
main.addEventListener("mouseup", (e) => {painting = false;
});
// 鼠标移出画布停止绘画，防止再次进入产生连线
main.addEventListener("mouseout", (e) => {painting = false;
});

移动端绘图

// 触摸绘图
canvas.addEventListener("touchstart", (e) => {painting = true;lastX = e.touches[0].pageX - e.touches[0].target.offsetLeft;lastY = e.touches[0].pageY - e.touches[0].target.offsetTop;ctx.beginPath();ctx.arc(lastX, lastY, ctx.lineWidth / 2, 0, 2 * Math.PI);ctx.closePath();ctx.fill();
});
// 使用事件委托优化移动端绘图，在画布上触摸移动时阻止body默认事件（阻止浏览器的滑动）
document.body.addEventListener("touchmove",(e) => {if (painting && e.target.matches(`canvas`)) {e.preventDefault();ctx.beginPath();ctx.moveTo(lastX, lastY);ctx.lineTo(e.touches[0].pageX - e.touches[0].target.offsetLeft,e.touches[0].pageY - e.touches[0].target.offsetTop);ctx.closePath();ctx.stroke();lastX = e.touches[0].pageX - e.touches[0].target.offsetLeft;lastY = e.touches[0].pageY - e.touches[0].target.offsetTop;}},{ passive: false }
);
canvas.addEventListener("touchend", (e) => {painting = false;
});
// 触摸移出画布停止绘画，防止再次进入产生连线
canvas.addEventListener("touchcancel", (e) => {painting = false;
});

显示当前的颜色

currentColor.addEventListener("input", (e) => {ctx.strokeStyle = e.target.value;ctx.fillStyle = e.target.value;
});
thickness.addEventListener("input", (e) => {ctx.lineWidth = parseInt(e.target.value);
});

点击切换颜色

// 点击色块改变画笔颜色，将色块背景色赋值给 currentColor.value （RGB 转为 HEX ）
brushColor.addEventListener("click", (e) => {if (e.target.matches("li")) {let color16 = "#";const color = getComputedStyle(e.target).backgroundColor;[...color.matchAll(/\d{1,3}/g)].forEach((item) => {const str = parseInt(item).toString(16);color16 += str.length === 2 ? str : "0" + str; // 确保六位数 HEX 颜色值});ctx.strokeStyle = color16;ctx.fillStyle = color16;currentColor.value = color16;}
});

画笔和橡皮的切换

// 点击图标切换铅笔橡皮，使用 globalCompositeOperation 设置绘图类型
type.addEventListener("click", (e) => {if (e.target.matches("img")) {const li = e.target.parentNode;type.childNodes.forEach((node) =>node.classList ? node.classList.remove("selected") : undefined);li.classList.add("selected");if (Array.from(li.classList).indexOf("eraser") >= 0) {text.textContent = "橡皮";ctx.globalCompositeOperation = "destination-out";} else {text.textContent = "铅笔";ctx.globalCompositeOperation = "source-over";}}
});