javascript - 给定输入以绘制具有选定背景的矩形 Canvas

我想做实时渲染的矩形是由你选择的材料的纹理填充。我想使用HTML5<canvas>和jQuery。在这个小提琴里，它应该是这样的。当您添加“a”和“b”边时，它将生成比例矩形，当您单击“材质”时，它将按材质纹理填充画布。
以下是最终预览的效果：
你能帮我做这个吗？

最佳答案

您应该捕获输入元素的值，然后相应地设置width和height属性。
$('input[name=sideA],input[name=sideB]').on('input',yourFunction())
然后你应该做一个函数，在你画图像的地方有一个循环。

var imgPosX = 0;
var imgPosY = 0;
var img = document.getElementById(YOURIMAGEID);

while(imgPosX < canvas.width){
    ctx.drawImage(img,imgPosX,imgPosY);
    if(imgPosX === canvas.width){
imgPosY += 50;
imgPosX += 0;
         }
if(imgPosY === canvas.height){
break;
}

    imgPosX +=50;
}

在eventlistener中调用此函数。