【html本地工具】html+JS实现一个超好看的绘画板/涂鸦板，带画笔、矩形、圆形、直线、文本、橡皮擦，有撤销、恢复、保存功能
以下是一个简单的HTML5绘画板示例，包含基本的绘制功能：画笔、矩形、圆形和直线。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<button onclick="drawLine()">直线</button>
<button onclick="drawRect()">矩形</button>
<button onclick="drawCircle()">圆形</button>
<button onclick="erase()">擦除</button>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var isDrawing = false;
var lastX = 0;
var lastY = 0;
var radius = 10;
var color = 'black';
function drawLine() {
ctx.beginPath();
ctx.moveTo(lastX, lastY);
isDrawing = true;
}
function drawRect() {
if (!isDrawing) return;
ctx.rect(lastX, lastY, radius, radius);
ctx.fillStyle = color;
ctx.fill();
}
function drawCircle() {
if (!isDrawing) return;
ctx.beginPath();
ctx.arc(lastX, lastY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = color;
ctx.fill();
}
function erase() {
// 使用白色填充区域来擦除
ctx.fillStyle = 'white';
ctx.globalCompositeOperation = 'destination-out';
}
canvas.addEventListener('mousedown', function(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', function(e) {
if (!isDrawing) return;
[lastX, lastY] = [e.offsetX, e.offsetY];
ctx.beginPath();
ctx.moveTo(lastX, lastY);
});
canvas.addEventListener('mouseup', function() {
isDrawing = false;
});
canvas.addEventListener('mouseleave', function() {
isDrawing = false;
});
</script>
</body>
</html>这段代码提供了一个简单的绘画板，用户可以使用按钮选择不同的绘图工具，在画布上绘制图形。当选择擦除工具时，会用白色覆盖选定区域。这个示例不包括画笔功能，因为画笔实现较为复杂，并且超出了简洁回答的要求。
评论已关闭