Javascript 动态对象html-在画布上由函数绘制的对象之间切换，并使用范围/滑块更改模式

我正在使用html、javascript和css编写一个web应用程序

我做了两个动态函数，一个画三角形，另一个画圆。 当我移动滑块时，它会根据绘制的图像创建一个图案。 当我在画布上单击鼠标时，它会从三角形变为圆形

问题是，当我通过单击画布将三角形更改为圆形，并尝试移动滑块后，图像将返回到原始（三角形）。 我也可以在画布上单击以将三角形更改为圆形，但不能通过再次单击将其更改为圆形

这就是我想做的：

1º-我想在画布上单击，前后从三角形变为圆形，在画布上单击，在图形之间切换

2º-在单击画布以替换图像后-滑块必须更改画布上显示的创建图案-并且除非我再次单击画布，否则不能返回原始图案

我提供下面的代码。希望你能看看。 谢谢你抽出时间

帆布
.etiq1{字体系列：verdana；字体大小：15px；}
#屏幕，#矢量{边框：1px实心#000000；背景色：#0000FF；}
输入{文本对齐：右；}
var屏幕、矢量、油漆、pR；
函数inicGraf（）{
screen=document.getElementById（“screen”）；
paint=screen.getContext（“2d”）；
pR=document.getElementById（“pR”）；
}
函数三角形（x，y，x1，y1，x2，y2，边，彩色线，彩色内）{
画笔风格=彩色线；
绘制。线宽=1；
paint.beginPath（）；
paint.moveTo（x，y）；paint.lineTo（x1，y1）；paint.lineTo（x2，y2）；
paint.closePath（）；
paint.fillStyle=colorInside；paint.fill（）；paint.stroke（）；
}
函数三角形四（x，y，side）{
三角形（x，y，（x+边），y，x+（边/2.0），y+（边/2.0），边，“#E6B569”，“#E6B569”）；
三角形（x+边，y，x+边，y+边，x+（边/2.0），y+（边/2.0），边，“#AA8D49”，“#AA8D49”）；
三角形（x+边，y+边，x，y+边，x+（边/2.0），y+（边/2.0），边，“#013D55”，“#013D55”）；
三角形（x，y+边，x，y，x+（边/2.0），y+（边/2.0），边，“#449779”，“#449779”）；
}
函数模式四（模）{
变量i，j，tam=500/模；
对于（i=0；i您可以在变量中保留一个布尔值，并在每次单击时将其切换。然后使用该值确定要调用的函数。在这里，我尝试保持大部分代码不变，并介绍了
isCirc
、
drawPattern
和
patternToggle
：

  function patternToggle(value) {
    isCirc = !isCirc;
    drawPattern(value);
  }

  function drawPattern(value) {
    if (isCirc) patternCirc(value);
    else patternFour(value);
  }

您可以在下面内联运行代码：



帆布
.etiq1{字体系列：verdana；字体大小：15px；}
#屏幕，#矢量{边框：1px实心#000000；背景色：#0000FF；}
输入{文本对齐：右；}
var屏幕、vect、paint、pR、isCirc=假；
函数inicGraf（）{
screen=document.getElementById（“screen”）；
paint=screen.getContext（“2d”）；
pR=document.getElementById（“pR”）；
}
函数三角形（x，y，x1，y1，x2，y2，边，彩色线，彩色内）{
画笔风格=彩色线；
绘制。线宽=1；
paint.beginPath（）；
paint.moveTo（x，y）；paint.lineTo（x1，y1）；paint.lineTo（x2，y2）；
paint.closePath（）；
paint.fillStyle=colorInside；paint.fill（）；paint.stroke（）；
}
函数三角形四（x，y，side）{
三角形（x，y，（x+边），y，x+（边/2.0），y+（边/2.0），边，“#E6B569”，“#E6B569”）；
三角形（x+边，y，x+边，y+边，x+（边/2.0），y+（边/2.0），边，“#AA8D49”，“#AA8D49”）；
三角形（x+边，y+边，x，y+边，x+（边/2.0），y+（边/2.0），边，“#013D55”，“#013D55”）；
三角形（x，y+边，x，y，x+（边/2.0），y+（边/2.0），边，“#449779”，“#449779”）；
}
函数模式四（模）{
变量i，j，tam=500/模；
对于（i=0；iSo您的问题是什么？请描述您当前的代码如何无法为您提供所需的结果！我希望能够通过单击前后交替画布上的图像。此外，在单击画布并更改图像后，滑块必须使用画布上看到的模式，而不是返回原始模式。对吗现在我在画布上使用onclick=“patternCirc（pR.value）”将图像更改为圆形，但我无法通过再次单击将其更改回圆形。也许这可以通过if语句实现，但我不知道如何实现。
  function patternToggle(value) {
    isCirc = !isCirc;
    drawPattern(value);
  }

  function drawPattern(value) {
    if (isCirc) patternCirc(value);
    else patternFour(value);
  }