資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
