canvas实现图片涂鸦功能（附代码）
要实现图片涂鸦功能，我们首先需要一个<canvas>元素和一张图片。下面是一个简单的HTML代码示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Image Drawing</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>
```
在上面的代码中，我们创建了一个500x500像素大小的<canvas>元素，并隐藏了一张名为image.jpg的图片。接下来，我们需要使用JavaScript来实现图片涂鸦功能。
首先，我们需要获取<canvas>元素和图片元素的引用，并设置绘图环境：
```javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById("myImage");
ctx.drawImage(image, 0, 0);
```
上面的代码中，我们使用`getContext("2d")`方法获取了一个2D绘图环境的引用。然后，我们使用`drawImage()`方法将图片绘制到<canvas>元素上。
接下来，我们需要监听鼠标事件，以便用户可以在图片上进行涂鸦。我们可以使用`mousedown`、`mousemove`和`mouseup`事件来实现这个功能：
```javascript
var isDrawing = false;
var lastX = 0;
var lastY = 0;
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
function startDrawing(e) {
isDrawing = true;
lastX = e.pageX - canvas.offsetLeft;
lastY = e.pageY - canvas.offsetTop;
}
function draw(e) {
if (!isDrawing) return;
var x = e.pageX - canvas.offsetLeft;
var y = e.pageY - canvas.offsetTop;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
lastX = x;
lastY = y;
}
function stopDrawing() {
isDrawing = false;
}
```
上面的代码中，我们首先定义了一些变量来跟踪鼠标事件的状态和位置。当用户按下鼠标时，我们将`isDrawing`设置为`true`，并保存当前鼠标的位置。在鼠标移动时，如果`isDrawing`为`true`，则绘制从上一次位置到当前位置的线段。最后，在鼠标松开时，我们将`isDrawing`设置为`false`，停止绘制。
通过以上代码，我们已经实现了在图片上涂鸦的基本功能。但是，我们还可以进一步扩展这个功能，例如添加颜色和线条粗细的选项，以及清除涂鸦和保存涂鸦等功能。
下面是一个扩展功能的示例代码：
```javascript
var colorPicker = document.getElementById("colorPicker");
var lineWidthSlider = document.getElementById("lineWidthSlider");
var clearButton = document.getElementById("clearButton");
var saveButton = document.getElementById("saveButton");
colorPicker.addEventListener("change", changeColor);
lineWidthSlider.addEventListener("input", changeLineWidth);
clearButton.addEventListener("click", clearCanvas);
saveButton.addEventListener("click", saveCanvas);
function changeColor() {
ctx.strokeStyle = colorPicker.value;
}
function changeLineWidth() {
ctx.lineWidth = lineWidthSlider.value;
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, 0, 0);
}
function saveCanvas() {
var dataURL = canvas.toDataURL("image/png");
var link = document.createElement("a");
link.href = dataURL;
link.download = "myDrawing.png";
link.click
免责声明：本文由用户上传，此文本数据来源于原作者，如有侵权请联系删除！转载此文是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与本网联系，我们将及时更正、删除，谢谢。