数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在HTML 5画布中使用鼠标绘画？
HTML5 有一个 div 元素可以创建用于鼠标绘画的框。开发者可以使用强大且适应性强的 HTML5 canvas 技术为网页创建动态的交互式图形。使用各种工具和方法可以在画布上绘画。用户在使用鼠标绘画时，可以通过拖动光标穿过画布来创建自由形状和线条，这是一个常见技术。所有图表和插图的简单草图都将使用此方法生成。
使用的属性
以下属性在示例中使用：
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 元素来跟踪鼠标移动。当用户点击画布时，会触发“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 定义名为 pen、eraser、canvas、tool 和 selected 的 id 和类的属性，这些属性为 HTML 元素定义样式。然后使用一些函数和事件侦听器使用 javascript 来构建强大的工具。因此，这也是一种白板。
1K+ 次浏览
