如何使用html canvas繪制任意形狀？

Question

我正在嘗試在html畫布上繪制類似於圖表的形狀：

0

100                                     .
                                        .
200                             .       .
                                        .
300                     .               .
                                        .
400     .       .                       .
                                        .
500     .................................

我看不到形狀坐標有什么問題：

(0, 500), (0, 400), (100, 400), (200, 300), (300, 200), (400, 100), (400, 500)

HTML / JS：

<html>
    <head>
        <script type="text/javascript">
            function drawSteps(heights) {
                var y = 500;
                var steps = document.getElementById('steps').getContext('2d');
                steps.fillStyle = '#C3EDBD';
                steps.beginPath();
                steps.moveTo(0, y);

                var x = 0;
                for (var i = 0; i < heights.length; i++) {
                    console.log(x.toString() + ', ' + (y - heights[i]).toString());
                    steps.lineTo(x, y - heights[i]);
                    x += 100;
                }

                steps.lineTo(x, 500);
                steps.lineTo(0, 500);
                steps.closePath();
                steps.fill();
            }
        </script>
    </head>
    <body>
        <canvas id="steps"></canvas>
        <script type="text/javascript">
            drawSteps([100, 100, 200, 300, 400]);
        </script>
    </body>
</html>

屏幕上沒有任何內容打印出來，但是畫布占用了300x150px的占位符。

Answer 1

它已繪制，但是您的畫布太小，因此您看不到它（默認為300 x 150像素）。

將畫布更改為：

<canvas width=500 height=500 id="steps"></canvas>

您會看到結果。

參見DEMO 。

請注意，使用CSS調整大小將無法使用，因為您的畫布仍將具有默認的300 x 150像素，但會拉伸到CSS中定義的尺寸。

查看此演示以比較HTML和CSS畫布大小。

Answer 2

您只需要為畫布定義寬度和高度

<canvas id="steps" width="1000" height="1000"></canvas>

使用CSS這樣做可能更好，但這是針對您問題的快速解決方案

如何使用html canvas繪制任意形狀？

問題描述

2 個解決方案

解決方案1
2 已采納 2016-07-24 23:26:14

解決方案2
1 2016-07-24 23:28:15

如何使用html canvas繪制任意形狀？

問題描述

2 個解決方案

解決方案1 2 已采納 2016-07-24 23:26:14

解決方案2 1 2016-07-24 23:28:15

解決方案1
2 已采納 2016-07-24 23:26:14

解決方案2
1 2016-07-24 23:28:15