固定サイズの要素で領域を塗りつぶす

Question

特定の屋根にどれだけの太陽電池パネルが収まるかを計算するアプリケーションを作成しています。

ユーザーは屋根の寸法を入力できます。 私たちは利用できる太陽電池パネルのサイズにしかありません。

キャンバスに、ユーザの入力にする必要があり基づき

要件

1）..私はキャンバスが進むべき道だと思ったが、私は必要な情報を見つけるように見えるはありません

）、（屋根の上に置くために煙突、ウィンドウオブジェクト...（現在、私はこのサイズに変更キャンバス内の矩形を持っている）

2）ユーザーが作成した（およびサイズすることができるはずです）サイズを変更すること3）Bソーラーパネル（長方形）を左オープンスペースにASED自動にキャンバス上

寸法および制限屋根とオブジェクトのエッジに

• 1ピクセル= 2センチメートル
• 間隔が7px（14センチメートルで描かなければなりません私はfabric.jsライブラリをチェックアウトしましたが、見つけることができないよう

）

ソーラーパネル169センチの高さと幅102センチメートルです私が必要とするものに近いもの。私はキャンバスを描画するために、これまでに得た

JS：

var canvas=document.getElementById("c"); 
var ctx=canvas.getContext("2d"); 

var width=50; 
var height=35; 
var $width=document.getElementById('width'); 
var $height=document.getElementById('height'); 

var paneelWidth=101; 
var peneelHeight=170; 

$width.value=width; 
$height.value=height; 

draw(); 

$width.addEventListener("keyup", function(){ 
    width=this.value/2; 
    draw(); 
}, false); 

$height.addEventListener("keyup", function(){ 
    height=this.value/2; 
    draw(); 
}, false); 


function draw(){ 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.fillRect(10,10,width,height) 
} 

更新

キャンバスは現在、ユーザーの入力に基づいて動的な方法でサイズを変更しません。

また、createPattern（）関数が見つかりました。これは私をソリューションに近づけています。私はキャンバスでのソーラーパネルのパターンを生成するには、このコードを追加した

：

function placepanels(direction) { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    var img = document.getElementById("paneel"); 
    var pat = ctx.createPattern(img, direction); 

    var w2 = canvas.width - 7; 
    var h2 = canvas.height - 7; 

    ctx.rect(7, 7, w2, h2); 
    ctx.fillStyle = pat; 
    ctx.fill(); 
} 

-7私はキャンバスの各サイズの14センチメートルスペースが必要beacause幅と高さです。それで、私はパターン7pxを含む四角形を左と上からオフセットする理由は？現在のところ、右と下の面でこれを達成することはできません。私は取得しています

最新号

結果が正しい見ていない、パターンが間違って繰り返されるように、それは（多くの繰り返しに）そうですか、それは繰り返して画像の適切なサイズを取得していません。

更新フィドル：キャンバスサイズ変更についてはhttps://jsfiddle.net/8e05ghqy/3/

Answer 1

、この関数はそれを行うだろう：使用方法の

changeCanvasSize = function(width, height) { 
    $('canvas').width(width) 
    $('canvas').height(height) 
} 

例：changeCanvasSize(450,250)は、幅の450px、高さの250ピクセルにキャンバスサイズを変更します。 HTML <canvas>要素.width(value)と.height(value)のHTML要素のサイズを変更するだけです。