網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究如何清除畫布以準備重繪？
要清除 畫布 以準備重繪，請在 HTML 中使用 canvas.clearRect() 方法。它將清除指定的畫素。此方法的引數包括 −
- x − 要清除的 x 座標
- y − 要清除的 y 座標
- 寬度 − 要清除的長方形的寬度
- 高度 − 要清除的長方形的高度
我們來看一個示例，在 JavaScript 中建立一個畫布並在單擊按鈕時將其清除以為重繪做準備。以下是建立畫布的畫布程式碼 −
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
JavaScript 中的清除按鈕程式碼。使用 clearRect() 方法清除畫布 −
var button=document.getElementById("clear");
button.onclick=function clearcanvas(){
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
var w = myCanvas.width;
myCanvas.width = 1;
myCanvas.width = w;
}
HTML 中的按鈕程式碼 −
<button id="clear" type="button">Clear Canvas</button>
示例
現在，我們來看一個清除畫布的完整示例 −
<!DOCTYPE html>
<html>
<body>
<button id="clear" type="button">Clear Canvas</button>
<canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
var button=document.getElementById("clear");
button.onclick=function clearcanvas(){
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
var w = myCanvas.width;
myCanvas.width = 1;
myCanvas.width = w;
}
</script>
</body>
</html>
輸出
單擊 清除畫布 按鈕，畫布將清除 −
更新於: 21-11-2023
1K+ 閱讀量
廣告