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>

屏幕上没有打印任何内容，但画布占用了300x150像素的占位符。

Answer 1

它被绘制但你的画布太小，所以你看不到它（默认为300 x 150像素）。

将画布更改为：

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

你会看到结果。

请参阅DEMO。

请注意，使用CSS调整大小不会起作用，因为您的画布仍然具有300 x 150像素的默认值，但会扩展到CSS中定义的尺寸。

请参阅this demo以比较画布的HTML与CSS大小。

Answer 2

您只需要为画布定义宽度和高度

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

使用CSS执行此操作可能更好，但这可以快速解决您的问题

如何使用html canvas绘制任意形状？

2 个答案: