我想制作实时渲染的矩形,由您选择的 Material 纹理填充。我想使用 HTML5 <canvas>
和 jQuery。在这个 fiddle 中 http://jsfiddle.net/1fhhtev7/是它应该的样子。当您添加“a”和“b”边时,它会生成成比例的矩形,当您单击 Material 时,它会按 Material 纹理填充 Canvas 。
预览在最终版本中应该是这样的:
你能帮我解决这个问题吗?
最佳答案
您应该捕获输入元素的值,然后相应地设置 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;
}
您在事件监听器中调用此函数。
关于javascript - 给定输入以绘制具有选定背景的矩形 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29227890/