JavaScript，这有什么问题吗？

Question

这是我的 JS 代码，如果有人能帮助我，我将非常感激，因为这段代码甚至没有运行，我不知道为什么。

<canvas id="Canvas1" width="400" height="100"></canvas>
<script>
    var can = document.getElementById('Canvas1'); 
    var ctx = can.getContext('2d');

    ctx.fillStyle = "black";
    ctx.fillRect(100, 100, 250, 100);
</script>

Answer 1

<canvas id="Canvas1" width="400" height="100" style="border:1px solid #000000;"></canvas>
<script>
var can = document.getElementById('Canvas1'); 
var ctx = can.getContext('2d');

ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, 150, 50);
</script>

您错过了 Canvas 中的边框，因此您没有看到 o/p

并且您还从 100(高度)开始 fillRect，这是矩形的终点，因此您无法看到结果。

记住

ctx.fillRect(p1, p2 ,p3 , p4);

p1 = 起点 X

p2 = 起点 Y

p3 = 矩形的宽度应小于或等于 Canvas 宽度。

p4 = 矩形的高度应小于或等于 Canvas 高度。