HTML Canvas 未绘图

Question

我正在尝试制作一个脚本，它将在 canvas 上绘制正方形，但是当我运行我的代码时，canvas 只是白色的，我错过了什么吗？ 这是我的代码。

var canvas = document.createElement("canvas")
canvas.id = "canvas"
container.append(canvas);
canvas = document.getElementById("canvas")

var ctx = canvas.getContext("2d");

ctx.strokeStyle = "rgb(242, 144, 7, 1)"
ctx.fillStyle = "rgb(242, 144, 7, 1)"
ctx.rect(0, 0, 50, 50)

控制台没有错误，

谢谢你的时间！

Answer 1

你错过了几行代码

 var container = document.getElementById("container"); var canvas = document.createElement("canvas") canvas.id = "canvas" container.append(canvas); var ctx = canvas.getContext("2d"); ctx.strokeStyle = "rgba(242, 144, 7, 1)" ctx.fillStyle = "rgba(242, 144, 7, 1)" ctx.rect(0, 0, 50, 50); ctx.stroke();

 <div id="container"> </div>

Answer 2

你需要使用rgba是你传递 4 个值

ctx.strokeStyle = "rgba(242, 144, 7, 1)"
ctx.fillStyle = "rgba(242, 144, 7, 1)"
ctx.rect(0, 0, 50, 50)