Javascript 给定一个输入，以绘制具有选定背景的矩形画布

我想使实时渲染矩形，这是由你们选择的材质纹理填充。我想使用HTML5和jQuery。在这把小提琴中，它应该是什么样子。当您添加“a”和“b”边时，它将生成比例矩形，当您单击材质时，它将按材质的纹理填充画布

以下是最终版本中预览的外观：

---

您能帮我做些什么吗？

您应该捕获输入元素的值，然后相应地设置

width

和

height

属性

$（'input[name=sideA]，input[name=sideB]'）。在（'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;
}

var-imgPosX=0；
var-imgPosY=0；
var img=document.getElementById（YOURIMAGEID）；
while（imgPosX

您可以在eventlistener中调用此函数。

试试这个

function draw(){
    $('img').click(function(){
    var $img = $(this).outerHTML;
    ctx.clearRect(0,0,canvas.width,canvas.height);
    var pat = ctx.createPattern(this, 'repeat');
    ctx.rect(40,40,width,height);
    ctx.fillStyle = pat;
    ctx.fill();
    });
}

画布绘制仅用于

更改

编号，不用于

键控

功能