1. 使用div实现画线
<body>
<div id="canvas"></div>
</body>
<script>
canvas.onclick = (e) => {
let anchor = document.createElement("div");
anchor.style.position = "absolute";
anchor.style.width = "6px";
anchor.style.height = "6px";
anchor.style.left = e.clientX + "px";
anchor.style.top = e.clientY + "px";
anchor.style.marginLeft = "-3px";
anchor.style.marginTop = "-3px";
anchor.style.background = "black";
anchor.style.borderRadius = "50%";
canvas.appendChild(anchor);
};
</script>
缺点：画线时生成的div太多，会出现卡顿且线不连贯
2. 用canvas画图
2.1 注意事项
- canvas是类似于一个<img>的inline元素，使用时会存在边缘留白的情况（出现滚动条），如果设置成block，会出现拉伸使得绘制的图案模糊
#canvas{
display: block;
height: 100vh;
width: 100vw;
}
这么写css会覆盖canvas初始设定的宽高，必须通过js获取屏幕宽高设定：
写在html里的为html属性，带style的为css属性，注意区别
<body>
<canvas id='canvas'></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
canvas.height = document.documentElement.clientHeight;
canvas.width = document.documentElement.clientWidth;
</script>
#canvas{
display: block;
}
- 在使用
mouseonmove的时候需要确定设备是否支持鼠标点击，比如手机上不支持鼠标事件，判断是否支持触屏的方法：
var isTouchDevice = 'ontouchstart' in document.documentElement;
电脑为false, 手机为true
- 触屏事件的x和y坐标在e的
touches里（touches -> 0 -> clientX和clientY），可以存在多个手指划动的情况
2.2 canvas画点
- 画矩形
<body>
<canvas id='canvas'></canvas>
</body>
<script>
let canvas = document.getElementById("canvas");
canvas.height = document.documentElement.clientHeight;
canvas.width = document.documentElement.clientWidth;
let ctx = canvas.getContext("2d"); /* 获取画图对象 */
ctx.fillStyle = "blue"; /* 控制颜色 */
let paintingSign = false; /* 设置画图指示信号 */
/* 监听鼠标按下 */
canvas.onmousedown = () => {
paintingSign = true;
};
/* 监听鼠标移动 */
canvas.onmousemove = (e) => {
if (paintingSign) {
ctx.fillRect(e.clientX - 5, e.clientY - 5, 10, 10);
}
};
/* 监听鼠标松开 */
canvas.onmouseup = () => {
paintingSign = false;
};
</script>
- 画圆形
/* 画圆形 */
canvas.onmousemove = (e) => {
if (paintingSign) {
ctx.beginPath();
ctx.arc(e.clientX, e.clientY, 10, 0, 2 * Math.PI);
ctx.fill();
}
};
- 触屏手机上画图
先判断设备是否支持触屏操作，不用再监听鼠标按下松开的动作
let isTouchDevice = "ontouchstart" in document.documentElement;
if (isTouchDevice) {
canvas.ontouchmove = (e) => {
ctx.beginPath();
let x = e.touches[0].clientX;
let y = e.touches[0].clientY;
ctx.arc(x, y, 10, 0, 2 * Math.PI);
ctx.fill();
};
}
注意：该代码在正常浏览器上可正常使用，但在有特殊操作的浏览器（如微信浏览器会自动跟着手指下滑）上有bug
2.3 canvas画线
- 鼠标画线
function drawLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1); /* 设置起始点 */
ctx.lineTo(x2, y2);
ctx.stroke();
}
let paintingSign = false;
let prevX = 0;
let prevY = 0;
ctx.lineWidth = 10; /* 调整线的粗细 */
ctx.lineCap = "round"; /* 使得线拐弯时没有断开 */
/* 监听鼠标按下 */
canvas.onmousedown = (e) => {
paintingSign = true;
prevX = e.clientX;
prevY = e.clientY;
};
/* 监听鼠标移动 */
canvas.onmousemove = (e) => {
if (paintingSign) {
drawLine(prevX, prevY, e.clientX, e.clientY);
prevX = e.clientX;
prevY = e.clientY;
}
};
/* 监听鼠标松开 */
canvas.onmouseup = (e) => {
paintingSign = false;
prevX = e.clientX;
prevY = e.clientY;
};
- 触摸屏上画线
function drawLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1); /* 设置起始点 */
ctx.lineTo(x2, y2);
ctx.stroke();
}
let isTouchDevice = "ontouchstart" in document.documentElement;
let prevX = 0;
let prevY = 0;
ctx.lineWidth = 10;
ctx.lineCap = "round";
if (isTouchDevice) {
/* 监听触屏按下 */
canvas.ontouchstart = (e) => {
prevX = e.touches[0].clientX;
prevY = e.touches[0].clientY;
};
/* 监听划屏 */
canvas.ontouchmove = (e) => {
x = e.touches[0].clientX;
y = e.touches[0].clientY;
drawLine(prevX, prevY, x, y);
prevX = e.touches[0].clientX;
prevY = e.touches[0].clientY;
};
}
