写一个canvas的项目
时间: 2023-11-18 08:21:42 浏览: 44
好的,我可以给你一个简单的canvas项目示例,这个项目可以实现一个简单的画板功能。你可以根据这个示例进行修改和扩展。
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Canvas画板</title>
<style type="text/css">
canvas {
border: 1px solid #000000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script type="text/javascript" src="paint.js"></script>
</body>
</html>
```
JS代码(paint.js):
```
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var isMouseDown = false;
var lastX, lastY;
canvas.addEventListener("mousedown", function(event) {
isMouseDown = true;
lastX = event.clientX - canvas.offsetLeft;
lastY = event.clientY - canvas.offsetTop;
});
canvas.addEventListener("mousemove", function(event) {
if (isMouseDown) {
var currentX = event.clientX - canvas.offsetLeft;
var currentY = event.clientY - canvas.offsetTop;
context.beginPath();
context.moveTo(lastX, lastY);
context.lineTo(currentX, currentY);
context.stroke();
lastX = currentX;
lastY = currentY;
}
});
canvas.addEventListener("mouseup", function(event) {
isMouseDown = false;
});
```
这个项目实现了通过鼠标在画布上拖动实现画线的功能。当鼠标按下时,设置`isMouseDown`为真,并记录下当前的鼠标位置;当鼠标移动时,如果`isMouseDown`为真,则画出一条从上一个鼠标位置到当前位置的线段,并更新上一个鼠标位置;当鼠标松开时,设置`isMouseDown`为假。