關(guān)于使用Css設(shè)置Canvas畫布大小的問題

問題分析

我們在調(diào)整畫布大小時，希望畫布中的圖形保持不變，只是改變畫布本身的大小。但是如果使用Css設(shè)置畫布大小，則會出現(xiàn)問題。

問題描述

如果使用Css設(shè)置Canvas畫布的大小，則導(dǎo)致畫布按比例縮放到你設(shè)置的值。

原因

在Canvas元素的內(nèi)部存在一個名為2d渲染環(huán)境（2d redering context）的對象，所以，通過Css設(shè)置畫布尺寸會引起奇怪的效果。

解決方案

在Html頁面上加入canvas元素（不能使用js動態(tài)加入canvas）。

通過Html設(shè)置畫布大小?？梢灾苯釉贖tml頁面上設(shè)置Canvas元素的大?。?/span>

<canvas id="testCanvas" width="200" height="100"></canvas>

也可以通過js設(shè)置畫布大?。?/span>

    var canvas = document.getElementById("testCanvas");
    canvas.width = 200;
    canvas.height = 100;

這兩種方法都可以。

需要注意的是，設(shè)置畫布大小后，畫布所有的樣式和內(nèi)容會重置（如畫布上的圖形會消失，在設(shè)置畫布大小后需要重新繪制）。

示例

首先我們創(chuàng)建一個寬度為200px，高度為100px的畫布，它的邊框為紅色。然后在中間畫一個大小為20*20的正方形：

代碼

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<canvas id="testCanvas"></canvas>
<script>
    var canvas, context;
    canvas = document.getElementById("testCanvas");

    canvas.width = 200;
    canvas.height = 100;
    canvas.style.border = "1px solid red";

    context = canvas.getContext("2d");
    context.strokeStyle = "#99cc33";
    context.fillRect(90, 40, 20, 20);
</script>
</body>
</html>

將畫布大小縮小1倍

使用css設(shè)置畫布大小

效果

分析

我們發(fā)現(xiàn)畫布是整體按比例縮小了1倍。

使用js設(shè)置畫布大小

效果

分析

相當(dāng)于把畫布的右半部和下半部去掉了，達(dá)到了我們預(yù)期的效果。

posted @ 2013-10-19 11:46 楊元超閱讀(12629) 評論(4) 收藏舉報

刷新頁面返回頂部