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

Question

我想制作实时渲染的矩形，它由您选择的材质填充。我想使用HTML5 <canvas>和jQuery。在这个小提琴http://jsfiddle.net/1fhhtev7/中它应该是什么样子。当你添加＆＃34; a＆＃34;和＆＃34; b＆＃34;它将产生比例矩形，当你点击材料时，它将通过材质纹理填充画布。

以下是最终预览的样子：

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

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;
}

你在eventlistener中调用这个函数。

Answer 2

试试这个，

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();
    });
}

Working Demo

  

Canvas仅绘制change数字而不是keyup函数