单击图标以在JavaScript的画布上绘制矩形

在HTML和JavaScript中，这应该是一项非常简单的任务。我有一个图标栏，目前只有一个可点击的链接，新框。在图标栏下面，我有一个画布。我的目标是每次用户按下new Box按钮时在画布上绘制一个新矩形

现在，我的图标栏和画布显示正确，我可以单击图标栏的“新建框”链接，但画布上不会显示矩形，即使我已将其

onclick

参数指定为：

newBox

var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var canvasWidth=canvas.width；
var canvasHeight=canvas.height；
函数新箱（e）{
context.beginPath（）；
context.fillStyle=“#ADD8E6”；
fillRect（50,50,150,150）；
context.fill（）；
}

正文{
背景颜色：象牙色；
填充：20px；
}
.图标栏{
宽度：100%；
背景色：#555；
溢出：自动；
边缘底部：25px；
}
.图标栏a{
浮动：左；
文本对齐：居中；
宽度：11.11%；
填充：12px0；
过渡：所有0.3秒缓解；
颜色：白色；
字体大小：24px；
文字装饰：无；
}
.图标栏a：悬停{
背景色：#000；
}
.图标栏文本{
字体风格：普通；
}
.主动{
背景色：#4CAF50；
}
#帆布{
宽度：95%；
身高：30%；
边框：4px纯蓝色；
}

建设者

您需要存储并更新

y

位置，如下所示。请注意，您还需要增加画布的大小，以防框消失在视野之外

var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var canvasWidth=canvas.width；
var canvasHeight=canvas.height；
设prevY=0；
函数新箱（e）{
context.fillStyle=“#ADD8E6”；
fillRect（50，prevY，150150）；
prevY+=160；//高度+一些填充
}

正文{
背景颜色：象牙色；
填充：20px；
}
.图标栏{
宽度：100%；
背景色：#555；
溢出：自动；
边缘底部：25px；
}
.图标栏a{
浮动：左；
文本对齐：居中；
宽度：11.11%；
填充：12px0；
过渡：所有0.3秒缓解；
颜色：白色；
字体大小：24px；
文字装饰：无；
}
.图标栏a：悬停{
背景色：#000；
}
.图标栏文本{
字体风格：普通；
}
.主动{
背景色：#4CAF50；
}

在我的编辑之后，它似乎正在工作。你能证实吗@Lazarea您的代码很好，当用户单击时，它会绘制一个新的矩形。但是，它会将其绘制到相同的位置（50,50），如果要添加超过1个位置，则必须为矩形指定一个新位置！我试图找到您修改的内容。非常奇怪，我看到它在这里工作，但是当我从Atom运行代码时，矩形没有出现。