当前位置：首页 > JavaScript

js实现画图工具

2026-03-01 09:41:42JavaScript

实现基础画布与绘图功能

使用HTML5的Canvas API创建画布，并通过JavaScript监听鼠标事件实现绘图功能。以下是核心代码示例：

const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

function startDrawing(e) {
    isDrawing = true;
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
}

function draw(e) {
    if (!isDrawing) return;
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
}

function stopDrawing() {
    isDrawing = false;
}

添加绘图样式控制

扩展功能以支持线条颜色、粗细等样式调整：

// 颜色选择器
document.getElementById('colorPicker').addEventListener('change', (e) => {
    ctx.strokeStyle = e.target.value;
});

// 线宽控制
document.getElementById('lineWidth').addEventListener('change', (e) => {
    ctx.lineWidth = e.target.value;
});

// 线帽样式
document.getElementById('lineCap').addEventListener('change', (e) => {
    ctx.lineCap = e.target.value;
});

实现图形绘制功能

添加矩形、圆形等基本图形绘制模式：

let currentTool = 'pencil';

function setTool(tool) {
    currentTool = tool;
}

function drawShape(e) {
    if (!isDrawing) return;

    switch(currentTool) {
        case 'rectangle':
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.strokeRect(startX, startY, e.offsetX - startX, e.offsetY - startY);
            break;
        case 'circle':
            const radius = Math.sqrt(Math.pow(e.offsetX - startX, 2) + Math.pow(e.offsetY - startY, 2));
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.arc(startX, startY, radius, 0, Math.PI * 2);
            ctx.stroke();
            break;
    }
}

添加撤销与重做功能

使用数组保存绘图历史记录：

let drawingHistory = [];
let historyIndex = -1;

function saveCanvasState() {
    historyIndex++;
    drawingHistory = drawingHistory.slice(0, historyIndex);
    drawingHistory.push(canvas.toDataURL());
}

function undo() {
    if (historyIndex <= 0) return;
    historyIndex--;
    const img = new Image();
    img.onload = function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0);
    };
    img.src = drawingHistory[historyIndex];
}

function redo() {
    if (historyIndex >= drawingHistory.length - 1) return;
    historyIndex++;
    const img = new Image();
    img.onload = function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0);
    };
    img.src = drawingHistory[historyIndex];
}

实现画布保存功能

将画布内容导出为图像文件：

function saveCanvas() {
    const link = document.createElement('a');
    link.download = 'drawing.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
}

响应式设计处理

使画布适应不同屏幕尺寸：

function resizeCanvas() {
    canvas.width = window.innerWidth * 0.8;
    canvas.height = window.innerHeight * 0.7;
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

触摸屏支持

添加触摸事件处理以实现移动端兼容：

canvas.addEventListener('touchstart', handleTouch);
canvas.addEventListener('touchmove', handleTouch);

function handleTouch(e) {
    e.preventDefault();
    const touch = e.touches[0];
    const mouseEvent = {
        offsetX: touch.clientX - canvas.offsetLeft,
        offsetY: touch.clientY - canvas.offsetTop
    };

    if (e.type === 'touchstart') {
        startDrawing(mouseEvent);
    } else {
        draw(mouseEvent);
    }
}