Javascript 将多个drawImage（）添加到一个画布

我在将多个图形添加到一个画布时遇到问题。我举了一些例子：

HTML:

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

---

代码没有在js代码的最后一行中画第二条红线。如何修复它？

此JS将完全（或大部分；取决于您想要它的位置）绘制红线（）

draw（15，56，200，150）

//这将调用函数draw（），它绘制每一行

代码中的

draw（）

函数以您设置的4个参数为例

最好以相同的方式绘制黑线，即将其从函数中取出，或将其从函数中取出，然后为黑线添加另一个draw（）调用

15=顶部X轴，56=顶部Y轴，200=底部X轴，150=底部Y轴

您还可以向函数中添加另一个颜色参数，如下所示：

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

var draw = function(var1, var2, var3, var4, color) {
    ctx.beginPath();
    ctx.strokeStyle = color; // Takes the fifth param "color"
    ctx.moveTo(var1, var2);
    ctx.lineTo(var3, var4);
    ctx.stroke();
}

draw(0, 0, 200, 50, "red")
draw(0, 10, 200, 60, "black")

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

var draw = function(var1, var2, var3, var4) {
ctx.beginPath();
ctx.moveTo(var1, var2);
ctx.lineTo(var3, var4);
ctx.stroke();
}

draw(0, 0, 200, 50)
draw(0, 10, 200, 60)

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

var draw = function(var1, var2, var3, var4, color) {
    ctx.beginPath();
    ctx.strokeStyle = color; // Takes the fifth param "color"
    ctx.moveTo(var1, var2);
    ctx.lineTo(var3, var4);
    ctx.stroke();
}

draw(0, 0, 200, 50, "red")
draw(0, 10, 200, 60, "black")