How do I hand draw on canvas with JavaScript?

When implementing hand-drawn functionality on canvas, the key steps involve setting up the canvas, listening for mouse or touch events, and drawing. The following steps demonstrate how to implement hand-drawn functionality on the HTML5 canvas element using JavaScript:

1. Prepare HTML and CSS

First, add a canvas element to the HTML file and style it with CSS to set its size.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Hand-Drawn</title>
<style>
    canvas {
        border: 1px solid #000;
    }
</style>
</head>
<body>
<canvas id="drawingCanvas" width="800" height="600"></canvas>
<script src="app.js"></script>
</body>
</html>

2. Set Up JavaScript

In JavaScript, we first need to retrieve the canvas element and its 2D rendering context. Then, we can implement drawing functionality by listening for mouse events (such as mousedown, mousemove, and mouseup).

javascript
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

let isDrawing = false;
let lastX = 0;
let lastY = 0;

function startDrawing(e) {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
}

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

    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    [lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
    isDrawing = false;
}

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

3. Customize Drawing Style

We can set properties such as stroke color and line width to customize the drawing style. For example:

javascript
ctx.strokeStyle = '#FF0000'; // Set stroke color to red
ctx.lineWidth = 5;           // Set line width
ctx.lineJoin = 'round';      // Set line join style
ctx.lineCap = 'round';       // Set line cap style

4. Add Additional Features

We can also add more features, such as clearing the canvas, changing colors, and adjusting line thickness.

javascript
function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

// Add a button and bind an event to clear the canvas
document.body.innerHTML += '<button onclick="clearCanvas()">Clear Canvas</button>';

The above are the basic steps to implement hand-drawn functionality on the HTML5 canvas using JavaScript. With these techniques, you can create a basic drawing application that allows users to draw directly with the mouse on the webpage.

2024年6月29日 12:07 回复

1个答案

1. Prepare HTML and CSS

2. Set Up JavaScript

3. Customize Drawing Style

4. Add Additional Features

你的答案