|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
如何在HTML 5 Canvas中調(diào)整圖像大??？【實例】
作者:admin 時間:2022-8-12 11:15:37 瀏覽:Canvas 元素是 HTML 5 的一部分，它允許渲染 2D 形狀和位圖（也稱為“光柵”）圖像。
Canvas 實際上有兩種尺寸：
- 元素的大小。
- 元素繪圖表面的大小。
元素的寬度和高度屬性設(shè)置元素的大小和元素的繪圖表面的大小。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>
結(jié)果
代碼分析
使用 JavaScript Canvas 調(diào)整圖像大小的步驟
- 獲取 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>
結(jié)果
代碼分析
使用 JavaScript Canvas 調(diào)整圖像大小的步驟
- 獲取 Canvas 的上下文。
- 設(shè)置 Canvas 的高度。
- 創(chuàng)建新 Canvas 元素以執(zhí)行調(diào)整大小并獲取它的上下文。
- 設(shè)置新創(chuàng)建的 Canvas 的寬度和高度。
- 在新的 Canvas 上繪制圖像。
- 使用新創(chuàng)建的 Canvas 在最終的 Canvas 上繪制圖像。
總結(jié)
Canvas 是一個標(biāo)準(zhǔn)的 HTML 元素，用于在 Web 應(yīng)用程序中繪制圖形。它只不過是頁面上沒有邊框或內(nèi)容的矩形區(qū)域。用戶可以使用這個矩形區(qū)域來繪制圖形。
在 Canvas 上呈現(xiàn)的圖形不同于普通的 HTML 和 CSS 樣式。整個 Canvas 及其包含的所有圖形都被視為單個 DOM 元素。
相關(guān)文章
- 比較和了解何時使用SVG與何時使用Canvas
- SVG 與 Canvas 的 6 大區(qū)別比較表
- SVG 與 Canvas 的五大區(qū)別
- 圖片SVG、PNG、JPEG、GIF有什么不同？
- SVG圖片對比PNG、JPEG的5大優(yōu)點(diǎn)
- svg circle stroke屬性設(shè)置實線邊框/虛線邊框/無邊框
- CSS+SVG：畫圓并且文字寫在圓中間
- CSS+SVG實現(xiàn)環(huán)形/圓環(huán)文字效果【簡單實例】
- 純CSS實現(xiàn)環(huán)形文字效果
- 用表格(Table)數(shù)據(jù)創(chuàng)建SVG圖表【簡單實用】
標(biāo)簽: Canvas
x
- 站長推薦
