如何在 HTML 5 画布上使用鼠标绘图?
HTML5 有一个除法元素，用于创建鼠标绘制的框。开发者可以使用强大且适应性强的 HTML5 画布技术为 Web 创建动态、交互式的图形。画布上绘图可以使用多种工具和方法。用户可以通过在画布上拖动光标来创建自由形状和线条，这是一种常用的鼠标绘图技巧。所有图表和插图的简单草图都将使用此方法制作。
使用的属性
示例中使用了以下属性 -
width - 定义主体的宽度。
height - 定义主体的高度。
border - 通过设置边框元素的宽度和颜色来定义。
cursor - 鼠标悬停在元素上时可见的鼠标光标由 cursor 属性指定。
display - 定义显示的行为。
padding - 此属性定义边框和内容。
margin − 此属性设置元素的边距，例如 margin-top、margin-left 和 margin-bottom。
background-color − 此属性设置元素的背景颜色。
font-weight − 此属性指定文本为粗体。
color − 定义文本的颜色。
示例
以下示例代码展示了如何使用 HTML Canvas 和 JavaScript 使用鼠标绘制一条线。该代码向 HTML Canvas 元素添加了事件监听器，并创建了一个 HTML Canvas 元素来跟踪鼠标移动。当用户点击 Canvas 时，会触发"mousedown"事件，该事件记录鼠标的初始坐标。当用户拖动鼠标时，代码会监听"mousemove"事件，并在起始坐标和终止坐标之间绘制一条线。当用户释放鼠标时，会触发"mouseup"事件，绘制完成。此代码使用户能够使用鼠标在画布上自由绘制，从而提供一种简单且交互的方式来创作数字艺术或视觉内容。
<!DOCTYPE html>
<html>
<head>
<title>Draw mouse with HTML</title>
<style>
.content{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#canvas{
border: 3px solid seagreen;
width: 560px;
height: 360px;
}
</style>
</head>
<body>
<div class="content">
<h1>
Drawing with mouse Event
</h1>
<canvas id="canvas" width="560" height="360"></canvas>
</div>
<script>
var x = 0;
var y = 0;
var isdrawing = false;
const cnv = document.getElementById("canvas");
const ctx = cnv.getContext("2d");
cnv.addEventListener("mousedown", (e) => {
x = e.offsetX;
y = e.offsetY;
isdrawing = true;
});
cnv.addEventListener("mousemove" ,(e) =>{
if(isdrawing === true){
drawLine(x, y, e.offsetX, e.offsetY);
x = e.offsetX;
y = e.offsetY;
}
});
cnv.addEventListener("mouseup" ,(e) => {
if( isdrawing === true){
drawLine(x, y, e.offsetX, e.offsetY);
x = 0;
y = 0;
isdrawing = false;
}
});
function drawLine(x1, y1, x2, y2){
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
ctx.closePath();
}
</script>
</body>
</html>
结论
以上输出表示使用 HTML5 中的鼠标进行绘图。我们使用内部 CSS 定义了 id 属性以及 pen、eraser、canvas、tool 和 selected 类，这些类定义了 HTML 元素的样式。然后使用 JavaScript 中的一些函数和事件监听器构建了强大的工具。因此，这也是一种白板。
