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

Question

我想制作实时渲染的矩形，由您选择的 Material 纹理填充。我想使用 HTML5 <canvas>和 jQuery。在这个 fiddle 中 http://jsfiddle.net/1fhhtev7/是它应该的样子。当您添加“a”和“b”边时，它会生成成比例的矩形，当您单击 Material 时，它会按 Material 纹理填充 Canvas 。

预览在最终版本中应该是这样的:

你能帮我解决这个问题吗？

Answer 1

您应该捕获输入元素的值，然后相应地设置 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;
}

您在事件监听器中调用此函数。