HTML5 Canvas：fillRectの境界線を設定する方法は？

Question

HTML5では、fillRect()（白い色で塗りつぶし）とborder（黒色）にしたいと考えています。私はstrokeRect()を使用したくないのですが、後でそれを記入することができます。私は四角形をクリックして色を変えるゲームを作っています（それはそれより複雑ですが、これはこれが焦点とするものです）。

<canvas id="canvas1" width="400" height="300" style="border:1px solid #000000;"></canvas> 
    <script> 
     var c=document.getElementById("canvas1"); 
     var ctx=c.getContext("2d"); 
     ctx.strokeStyle="rgba(0,0,0,1)"; 
     ctx.strokeRect(0,0,100,100); 
    </script> 

キャンバスの周りの境界線は参照用です。 CSSも使用できますが、現在はすべてHTML形式です。

Answer 1

幅と高さで四角形を描画する位置を調整します。いったんそれをしたら、より大きな正方形を最初に描きます.2倍以上大きく、同じ中心点を持ちます。だから、あなたは大きいし、次にあなたが一番上に通常の四角を描く四角形を描画し、これは、あなたの正方形のような錯覚を与える国境

HTML

<canvas id="canvas1" width="400" height="300" style="border:1px solid #000000;"></canvas> 

CSS

#canvas1{ 
    border: solid 1px black; 
} 

を持っていますJavascriptを

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

var rectXPos = 50; 
var rectYPos = 50; 
var rectWidth = 100; 
var rectHeight = 100; 

drawBorder(rectXPos, rectYPos, rectWidth, rectHeight) 

ctx.fillStyle='#FFF'; 
ctx.fillRect(rectXPos, rectYPos, rectWidth, rectHeight); 

function drawBorder(xPos, yPos, width, height, thickness = 1) 
{ 
    ctx.fillStyle='#000'; 
    ctx.fillRect(xPos - (thickness), yPos - (thickness), width + (thickness * 2), height + (thickness * 2)); 
} 

jsfiddleリンク：https://jsfiddle.net/jxgw19sh/2/

- 更新 -

は、デフォルト値は1ですが、あなたは、関数にthicknessのために他の番号を提供することができ、それが代わりに1

Answer 2

ライブラリなしで後で入力することはできません。何かを変更したい場合は、単に再描画します。あなたはそれが満たされますtrueするfillRectを変更した場合、それは、唯一の境界線を描画します

ctx.fillStyle = 'blue'; 
ctx.strokeStyle = 'red'; 
var fillRect = false; 
ctx.rect(20, 20, 150, 100); 
if (fillRect) { 
    ctx.fill(); 
} 
ctx.stroke(); 

： あなたはそのようなものを使用することができます。毎週​​にキャンバスを更新できます。

しかし、おそらくpaper.jsのようなライブラリを使いたいかもしれません。オブジェクトをクリックするなどの作業がはるかに容易になり、欲しいもののように、一度作成して後で更新するオブジェクトにキャンバス上の描画を抽象化します。