jquery - 使用 Jquery 在画布中绘图时锐利的边缘
问题描述
我正在练习如何使用 jquery 在画布中使用和绘图,但是在移动鼠标时边缘很锋利(如下所示) 在 jquery 中绘图时有什么方法可以让边缘变得平滑吗?帮助表示赞赏并提前感谢:)。
jQuery
var canvas;
var ctx;
// var points;
var brush = {
x: 0,
y: 0,
color: '#000000',
size: 4,
down: false
};
var strokes = []; // for storing prev strokes
var currentStroke = null // current stroke
function redraw() {
ctx.clearRect(0, 0, canvas.width(), canvas.height());
ctx.lineCap = 'round';
for (var i = 0; i < strokes.length; i++) {
var s = strokes[i];
ctx.strokeStyle = s.color;
ctx.lineWidth = s.size;
ctx.beginPath();
ctx.moveTo(s.points[0].x, s.points[0].y);
for (var j = 0; j < s.points.length; j++) {
var p = s.points[j];
ctx.lineTo(p.x, p.y);
}
ctx.stroke();
}
}
function init() {
canvas = $('#draw');
canvas.attr({
width: window.innerWidth,
height: window.innerHeight,
})
ctx = canvas[0].getContext('2d');
// console.log(ctx,"this is ctx");
// function mouseEvent(e) {
// console.log(e.pageX,"Xval");
// console.log(e.pageY,"Yval");
// brush.x = e.pageX;
// brush.y = e.pageY;
// currentStroke.points.push({
// x: brush.x,
// y: brush.y
// });
// redraw();
// }
// adding mouseEvent listerners,
canvas.mousedown(function(e) {
brush.down = true;
brush.x = e.pageX;
brush.y = e.pageY;
currentStroke = {
color: brush.color,
size: brush.size,
points: []
};
currentStroke.points.push({
x: brush.x,
y: brush.y
})
redraw();
// mouseEvent(e);
//now we have to push this to strokes which keeps track of preveous data
strokes.push(currentStroke);
}).mouseup(function(e) {
brush.down = false;
brush.x = e.pageX;
brush.y = e.pageY;
currentStroke.points.push({
x: brush.x,
y: brush.y
})
currentStroke = null;
redraw();
}).mousemove(function(e) {
if (brush.down) {
brush.x = e.pageX;
brush.y = e.pageY;
currentStroke.points.push({
x: brush.x,
y: brush.y
});
redraw();
}
})
$('#save-btn').click(function() {
window.open(canvas[0].toDataURL());
});
$('#undo-btn').click(function() {
strokes.pop();
redraw();
});
$('#color-picker').on('input', function() {
brush.color = this.value;
});
$('#brush-size').on('input', function() {
brush.size = this.value;
})
}
$(init); //... (when document is ready)(calling the function)
以下是我的输出,边缘很锋利。以上是我正在练习的代码。我使用了 Jquery、Html 画布。 这是我的输出
解决方案
推荐阅读
- android - 如何区分适配器中视图之间的点击事件?
- javascript - 解析 JSON 数组响应
- python - 在 Python 中,我们如何编写只提取列表中可用的特定列的 sql 查询?
- sql - 在大型数据集上更新其他表的值很昂贵
- node.js - 如何在特定阶段将数据从 azure cosmos db 备份到 azure blob?
- java - jersey 2.x 中的 Multipart:java 客户端找不到内容类型 multipart/form-data 类型的编写器
- visual-studio-code - IBM Blockchain Platform:创建智能合约时出错
- excel - 需要在返回之前获得最后一场比赛吗?
- php - Laravel 提交数据未定义索引时出错:
- c - 在我的代码中找不到“绝对丢失的内存”