帮我写一个html程序,这个程序是一个画画版
时间: 2023-03-20 22:01:25 浏览: 49
好的,以下是一个简单的HTML画画板程序,你可以把它复制到文本编辑器中,保存为.html文件,然后用浏览器打开:
```html
<!DOCTYPE html>
<html>
<head>
<title>画画板</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var painting = false;
canvas.addEventListener("mousedown", startPosition);
canvas.addEventListener("mouseup", finishedPosition);
canvas.addEventListener("mousemove", draw);
function startPosition(e) {
painting = true;
draw(e);
}
function finishedPosition() {
painting = false;
ctx.beginPath();
}
function draw(e) {
if (!painting) return;
ctx.lineWidth = 5;
ctx.lineCap = "round";
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}
</script>
</body>
</html>
```
这个程序使用HTML5中的canvas元素来实现画画板功能。当你在画布上按下鼠标时,程序开始绘制,当你松开鼠标时,程序停止绘制。在移动鼠标时,程序会根据鼠标移动的轨迹绘制线条。
你可以根据自己的需求修改代码中的画布大小、线条宽度等参数。希望这个程序对你有帮助!