使用 HTML canvas fillRect() 改变线的方向答案

【问题标题】：Change orientation of line using HTML canvas fillRect()使用 HTML canvas fillRect() 改变线的方向
【发布时间】：2023-02-07 19:00:50
【问题描述】：

我想使用 HTML canvas fillRect() 制作一个从右上角到左下角的对角线块。

我设法创建了一个从左上角到右下角有一条线的块。

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
    for(var i = 0; i < 300; ++i) {
      ctx.fillRect(i, i, 1, 1);
    }
</script>

</body>
</html>

我怎样才能根据这段代码得到我想要的东西？

【问题讨论】：

为什么使用fillRect而不是lineTo画线？

标签： html5-canvas

【解决方案1】：

我使用lineTo 管理它。

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(300, 0);
ctx.lineTo(0, 300);
ctx.moveTo(0, 300);
ctx.lineTo(300, 0);
ctx.stroke();
    
</script>

</body>
</html>

【讨论】：