如何使用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