Javascript 如何为预选图像创建调色板？ P>我现在正在创建一个绘图应用程序，我想在我的页面上创建一个调色板，它在上面加载图像，在绘制时会改变所选的图像。这是在p5.js上 this.shapes = ["Hexagon", "Square", "Circle", "Triangle"]; this.selectedShape = "Hexagon"; var self = this; var colourClick = function() { //remove the old border var current = select("#" + self.selectedShape + "Swatch"); current.style("border", "0"); var c = this.id().split("Swatch")[0]; self.selectedShape = c; image(c); this.style("border", "2px solid red"); } this.loadShape = function() { image(this.shapes[0]); (var i = 0; i < this.shapes.length; i++) { var shapeID = this.shapes[i] + "Swatch"; var shapeSwatch = createDiv() shapeSwatch.class('shapeSwatches'); shapeSwatch.id(shapeID); select(".shapePalette").child(shapeSwatch); select("#" + shapeID).style(this.shape[i]); shapeSwatch.mouseClicked(shapeClick) } select(".shapeSwatches").style("border", "2px solid red"); }; this.loadShape(); }_Javascript_P5.js

Javascript 如何为预选图像创建调色板？ P>我现在正在创建一个绘图应用程序，我想在我的页面上创建一个调色板，它在上面加载图像，在绘制时会改变所选的图像。这是在p5.js上 this.shapes = ["Hexagon", "Square", "Circle", "Triangle"]; this.selectedShape = "Hexagon"; var self = this; var colourClick = function() { //remove the old border var current = select("#" + self.selectedShape + "Swatch"); current.style("border", "0"); var c = this.id().split("Swatch")[0]; self.selectedShape = c; image(c); this.style("border", "2px solid red"); } this.loadShape = function() { image(this.shapes[0]); (var i = 0; i < this.shapes.length; i++) { var shapeID = this.shapes[i] + "Swatch"; var shapeSwatch = createDiv() shapeSwatch.class('shapeSwatches'); shapeSwatch.id(shapeID); select(".shapePalette").child(shapeSwatch); select("#" + shapeID).style(this.shape[i]); shapeSwatch.mouseClicked(shapeClick) } select(".shapeSwatches").style("border", "2px solid red"); }; this.loadShape(); }

javascript

Javascript 如何为预选图像创建调色板？ P>我现在正在创建一个绘图应用程序，我想在我的页面上创建一个调色板，它在上面加载图像，在绘制时会改变所选的图像。这是在p5.js上 this.shapes = ["Hexagon", "Square", "Circle", "Triangle"]; this.selectedShape = "Hexagon"; var self = this; var colourClick = function() { //remove the old border var current = select("#" + self.selectedShape + "Swatch"); current.style("border", "0"); var c = this.id().split("Swatch")[0]; self.selectedShape = c; image(c); this.style("border", "2px solid red"); } this.loadShape = function() { image(this.shapes[0]); (var i = 0; i < this.shapes.length; i++) { var shapeID = this.shapes[i] + "Swatch"; var shapeSwatch = createDiv() shapeSwatch.class('shapeSwatches'); shapeSwatch.id(shapeID); select(".shapePalette").child(shapeSwatch); select("#" + shapeID).style(this.shape[i]); shapeSwatch.mouseClicked(shapeClick) } select(".shapeSwatches").style("border", "2px solid red"); }; this.loadShape(); },javascript,p5.js,Javascript,P5.js,我完全偏离了这个准则吗？我有一个色板的例子，它是我写的，我试图重写它的形状。我有预装图像，我想使用它遵循的形状写在代码中任何帮助都将不胜感激。行中：image（this.shapes[0]）您试图绘制一个字符串，这就是它告诉您类型无效的原因。 p5.min.js:32 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type

我完全偏离了这个准则吗？我有一个色板的例子，它是我写的，我试图重写它的形状。我有预装图像，我想使用它遵循的形状写在代码中

任何帮助都将不胜感激。

行中：

image（this.shapes[0]）您试图绘制一个字符串，这就是它告诉您类型无效的原因。
p5.min.js:32 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
    at ShapePalette.loadShape (shapePalette.js:30)
    at new ShapePalette (shapePalette.js:50)