|
|
|
|
|
|
如何在HTML 5 Canvas中調整圖像大小？【實例】
作者:admin 時間:2022-8-12 11:15:37 瀏覽:Canvas 元素是 HTML 5 的一部分，它允許渲染 2D 形狀和位圖（也稱為“光柵”）圖像。
Canvas 實際上有兩種尺寸：
- 元素的大小。
- 元素繪圖表面的大小。
元素的寬度和高度屬性設置元素的大小和元素的繪圖表面的大小。CSS 屬性只影響元素的大小而不影響繪圖表面。
實例一
例子：
<!DOCTYPE html>
<html>
<body>
<p>圖像：</p>
<img id="forest" width="500" height="280" src="1.jpg">
<p>Canvas:</p>
<canvas id="Canvas" width="300" height="200" style="border:15px solid #000066;">
你的瀏覽器不支持 HTML5 canvas
</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("Canvas");
var context = canvas.getContext("2d");
var img = document.getElementById("forest");
context.drawImage(img, 12, 8);
};
</script>
</body>
</html>
結果
代碼分析
使用 JavaScript Canvas 調整圖像大小的步驟
- 獲取 Canvas 的上下文。
- 在新的 Canvas 上繪制圖像。
實例二
上面示例是截圖了部分圖像，我們還可以用Canvas把圖像放大。
示例
<!DOCTYPE html>
<html>
<body>
<p>圖像：</p> <img src="1.jpg" width="500" height="280">
<p>Canvas:</p>
<canvas id="canvas" width="600" style="border:15px solid #000066;">你的瀏覽器不支持 HTML5 canvas </canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = "1.jpg";
img.onload = function() {
// set height proportional to destination image
canvas.height = canvas.width * (img.height / img.width);
// step 1 - resize to 75%
const oc = document.createElement('canvas');
const octx = oc.getContext('2d');
// Set the width & height to 75% of image
oc.width = img.width * 0.75;
oc.height = img.height * 0.75;
// step 2, resize to temporary size
octx.drawImage(img, 0, 0, oc.width, oc.height);
// step 3, resize to final size
ctx.drawImage(oc, 0, 0, oc.width * 0.75, oc.height * 0.75, 0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>
結果
代碼分析
使用 JavaScript Canvas 調整圖像大小的步驟
- 獲取 Canvas 的上下文。
- 設置 Canvas 的高度。
- 創建新 Canvas 元素以執行調整大小并獲取它的上下文。
- 設置新創建的 Canvas 的寬度和高度。
- 在新的 Canvas 上繪制圖像。
- 使用新創建的 Canvas 在最終的 Canvas 上繪制圖像。
總結
Canvas 是一個標準的 HTML 元素，用于在 Web 應用程序中繪制圖形。它只不過是頁面上沒有邊框或內容的矩形區域。用戶可以使用這個矩形區域來繪制圖形。
在 Canvas 上呈現的圖形不同于普通的 HTML 和 CSS 樣式。整個 Canvas 及其包含的所有圖形都被視為單個 DOM 元素。
相關文章
標簽: Canvas
x
