$(document).ready(function() {
var isDrawing = false;
var previousX, previousY;
$(document).mousedown(function(e) {
if (e.which === 1) {
isDrawing = true;
previousX = e.pageX;
previousY = e.pageY;
}
});
$(document).mousemove(function(e) {
if (isDrawing) {
var currentX = e.pageX;
var currentY = e.pageY;
drawLine(previousX, previousY, currentX, currentY);
previousX = currentX;
previousY = currentY;
}
});
$(document).on('contextmenu', function(e) {
e.preventDefault();
clearDrawing();
});
$(document).mouseup(function() {
isDrawing = false;
});
// Function to draw a line
function drawLine(startX, startY, endX, endY) {
var canvas = document.createElement('canvas');
canv
网页画画 画笔 F12复制到控制台console 既可使用
最新推荐文章于 2024-08-30 11:13:25 发布
这篇博客介绍了一种使用JavaScript实现在网页上画画的方法。通过监听鼠标事件,当鼠标按下时开始绘制,移动时更新坐标并画线,松开鼠标时停止绘制。同时,提供了清除画布的功能。代码中创建了canvas元素,并设置了线条样式和宽度,实现了平滑的线条效果。
摘要由CSDN通过智能技术生成