如何在canvas上制作自己的画作？

30 min read

非常好，以下是HTML和JavaScript代码，可以创建一个简单的绘画应用程序：

HTML部分：

<!DOCTYPE html>
<html>
<head>
	<title>Canvas Drawing</title>
	<style>
		canvas {
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="500" height="500"></canvas>
	<button onclick="clearCanvas()">Clear</button>
	<script src="draw.js"></script>
</body>
</html>

JavaScript部分（保存为 draw.js 文件）：

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

canvas.addEventListener('mousedown', start);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stop);

function start(event) {
    painting = true;
    draw(event);
}

function draw(event) {
    if (!painting) return;
    ctx.lineWidth = 5;
    ctx.lineCap = "round";
    ctx.strokeStyle = "#000";
    ctx.lineTo(event.offsetX, event.offsetY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(event.offsetX, event.offsetY);
}

function stop() {
    painting = false;
    ctx.beginPath();
}

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

这个代码创建一个具有"canvas" ID的画布元素，其大小为500×500像素。当用户通过单击并按住鼠标时，事件侦听器将在画布上启动绘图过程。当用户移动鼠标时，draw()函数将会绘制一条线段。当用户放开鼠标时，事件侦听器将停止绘图进程。最后的clearCanvas()函数可以清除整个画布。