给定输入以绘制具有选定背景的矩形画布答案

【问题标题】：Given an input to draw a rectangle canvas with selected background给定输入以绘制具有选定背景的矩形画布
【发布时间】：2015-05-27 11:37:27
【问题描述】：

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

这是最终预览的样子：

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

【问题讨论】：

标签： javascript jquery html canvas html5-canvas

【解决方案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;
}

你在你的事件监听器中调用这个函数。

【讨论】：

【解决方案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

画布仅绘制到 change 数字而不是 keyup 函数

【讨论】：