如何解决在画布上绘制线条时形状怪异JS
我正在尝试在JS中绘制非常简单的绘画,但是当我增加线宽时会出现问题,它会在形状的末尾创建怪异的形状,但是当我使用lineWidth = 1时却不会,我不知道问题的根源还在于它在两行之间创建空间,而lineWidth = 1时我没有这个问题
这是我的代码:
class Board{
constructor(canvas) {
this.canvas = canvas;
this.ctx = this.canvas.getContext("2d");
this.isDrawing = false;
this.mousePosition = {
x: 0,y: 0
};
this.color = "black";
this.rect = this.canvas.getBoundingClientRect();
this.lineWidth = 15;
this.height = 0;
this.width = 0;
this.initBoard();
// this.test();
// this.checkIfFill = this.checkIfFill.bind(this)
}
initBoard() {
this.renderCanvas();
window.addEventListener("resize",() => {
this.renderCanvas();
});
this.canvas.addEventListener("mousedown",(e) => {
this.mousePosition = {
x: e.clientX - this.rect.left,y: e.clientY - this.rect.top
};
this.isDrawing = true;
});
this.canvas.addEventListener("mousemove",(e) => {
if (this.isDrawing) {
this.draw((e.clientX - this.rect.left),(e.clientY - this.rect.top));
this.mousePosition = {
x: e.clientX - this.rect.left,y: e.clientY - this.rect.top
};
}
});
this.canvas.addEventListener("mouseup",() => {
this.isDrawing = false;
});
}
renderCanvas() {
const drawingTools = document.querySelector(".drawing-tools");
const dpr = window.devicePixelRatio;
this.height = document.body.offsetHeight - drawingTools.offsetHeight;
this.width = document.body.offsetWidth;
this.canvas.style.height = this.height + "px";
this.canvas.style.width = this.width + "px";
this.canvas.setAttribute("width",(this.width*dpr) + "px");
this.canvas.setAttribute("height",(this.height*dpr) + "px");
this.ctx.scale(dpr,dpr);
}
draw(x,y) {
this.ctx.strokeStyle = this.color;
this.ctx.lineWidth = this.lineWidth;
this.ctx.beginPath();
this.ctx.moveTo(this.mousePosition.x,this.mousePosition.y);
this.ctx.lineTo(x,y);
this.ctx.stroke()
// this.ctx.closePath();
}
setColor(color) {
this.color = color;
}
setLineWidth(width) {
this.lineWidth = width;
}
reset() {
this.ctx.clearRect(0,this.canvas.width,this.canvas.height)
}
test() {
this.ctx.strokeStyle = this.color;
this.ctx.lineWidth = this.lineWidth;
this.ctx.beginPath();
this.ctx.moveTo(100,100);
this.ctx.lineTo(150,100);
this.ctx.stroke()
}
checkIfFill() {
this.canvas.addEventListener("mousemove",(e) => {
const x = e.clientX - this.rect.left;
const y = e.clientY - this.rect.top;
console.log(this.ctx.getImageData(x,y,1,1).data)
})
}
}
解决方法
发生这种情况的原因有两点:
- 在
draw()
函数中,您将为每次通话设置起点和。通常,一旦用户按下鼠标按钮-一次,就可以确定开始时间。 - 即使固定了#1,线路末端仍可能看起来有些“模糊”。可以通过将上下文的lineCap样式设置为
round
而不是默认的butt
-行端点的平方来解决此问题。
这是一个基于您的代码的示例(只需单击“运行代码段”):
class Board {
constructor(canvas) {
this.canvas = canvas;
this.ctx = this.canvas.getContext("2d");
this.isDrawing = false;
this.mousePosition = {
x: 0,y: 0
};
this.color = "black";
this.rect = this.canvas.getBoundingClientRect();
this.lineWidth = 16;
this.height = 0;
this.width = 0;
this.initBoard();
// this.test();
// this.checkIfFill = this.checkIfFill.bind(this)
}
initBoard() {
this.renderCanvas();
window.addEventListener("resize",() => {
this.renderCanvas();
});
this.canvas.addEventListener("mousedown",(e) => {
this.mousePosition = {
x: e.clientX - this.rect.left,y: e.clientY - this.rect.top
};
this.ctx.beginPath();
this.ctx.moveTo(this.mousePosition.x,this.mousePosition.y);
this.isDrawing = true;
});
this.canvas.addEventListener("mousemove",(e) => {
if (this.isDrawing) {
this.draw((e.clientX - this.rect.left),(e.clientY - this.rect.top));
this.mousePosition = {
x: e.clientX - this.rect.left,y: e.clientY - this.rect.top
};
}
});
this.canvas.addEventListener("mouseup",() => {
this.isDrawing = false;
});
}
renderCanvas() {
// const drawingTools = document.querySelector(".drawing-tools");
const dpr = window.devicePixelRatio;
this.height = document.body.offsetHeight;
this.width = document.body.offsetWidth;
this.canvas.style.height = this.height + "px";
this.canvas.style.width = this.width + "px";
this.canvas.setAttribute("width",(this.width * dpr) + "px");
this.canvas.setAttribute("height",(this.height * dpr) + "px");
this.ctx.scale(dpr,dpr);
}
draw(x,y) {
this.ctx.strokeStyle = this.color;
this.ctx.lineWidth = this.lineWidth;
this.ctx.lineCap = 'round';
this.ctx.lineTo(x,y);
this.ctx.stroke()
}
setColor(color) {
this.color = color;
}
setLineWidth(width) {
this.lineWidth = width;
}
reset() {
this.ctx.clearRect(0,this.canvas.width,this.canvas.height)
}
test() {
this.ctx.strokeStyle = this.color;
this.ctx.lineWidth = this.lineWidth;
this.ctx.beginPath();
this.ctx.moveTo(100,100);
this.ctx.lineTo(150,100);
this.ctx.stroke()
}
checkIfFill() {
this.canvas.addEventListener("mousemove",(e) => {
const x = e.clientX - this.rect.left;
const y = e.clientY - this.rect.top;
});
}
}
var b = new Board(document.getElementById("canvas"));
<canvas id="canvas" width=400 height=300></canvas>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。