当前位置：首页 > JavaScript

js实现画图工具

2026-04-04 10:22:51JavaScript

使用Canvas API实现基础画图工具

HTML中需添加<canvas>元素并设置宽高：

<canvas id="drawingCanvas" width="800" height="600"></canvas>

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;
}

添加样式控制功能

创建颜色和粗细选择控件：

<input type="color" id="colorPicker">
<input type="range" id="brushSize" min="1" max="50" value="5">

更新绘图样式：

const colorPicker = document.getElementById('colorPicker');
const brushSize = document.getElementById('brushSize');

colorPicker.addEventListener('change', (e) => {
    ctx.strokeStyle = e.target.value;
});

brushSize.addEventListener('input', (e) => {
    ctx.lineWidth = e.target.value;
});

实现橡皮擦功能

添加橡皮擦切换按钮：

<button id="eraserBtn">橡皮擦</button>

JavaScript切换逻辑：

const eraserBtn = document.getElementById('eraserBtn');
let isEraser = false;

eraserBtn.addEventListener('click', () => {
    isEraser = !isEraser;
    if (isEraser) {
        ctx.globalCompositeOperation = 'destination-out';
    } else {
        ctx.globalCompositeOperation = 'source-over';
    }
});

保存和清除画布

添加功能按钮：

<button id="saveBtn">保存</button>
<button id="clearBtn">清除</button>

实现对应功能：

document.getElementById('saveBtn').addEventListener('click', () => {
    const dataURL = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = 'drawing.png';
    link.href = dataURL;
    link.click();
});

document.getElementById('clearBtn').addEventListener('click', () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

移动端触摸支持

添加触摸事件处理：

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);
    }
}

进阶功能扩展

实现矩形和圆形绘制：

js实现画图工具

let currentTool = 'brush';

document.getElementById('rectBtn').addEventListener('click', () => {
    currentTool = 'rect';
});

document.getElementById('circleBtn').addEventListener('click', () => {
    currentTool = 'circle';
});

let startX, startY;

canvas.addEventListener('mousedown', (e) => {
    startX = e.offsetX;
    startY = e.offsetY;
    if (currentTool === 'brush') startDrawing(e);
});

canvas.addEventListener('mouseup', (e) => {
    const endX = e.offsetX;
    const endY = e.offsetY;

    if (currentTool === 'rect') {
        ctx.strokeRect(startX, startY, endX - startX, endY - startY);
    }
    if (currentTool === 'circle') {
        const radius = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
        ctx.beginPath();
        ctx.arc(startX, startY, radius, 0, Math.PI * 2);
        ctx.stroke();
    }
});