web-dev-qa-db-ja.com

HTML5キャンバス：fillRectの境界を設定する方法は？

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で作成されています。

javascriptcsshtmlcanvas
11
I. Golsby

幅と高さで正方形を描く位置を決めます。それが終わったら、最初に大きな正方形を描きます。正方形の幅は2倍、高さは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/

-更新-

drawBorderにthicknessという追加のパラメーターを追加します。デフォルト値は1ですが、thicknessに他の任意の数値を関数に指定すると、1の代わりに値が使用されます。

7
Canvas

ライブラリなしでは後で埋めることはできません。何かを変更したい場合は、単に再描画してください。あなたはそのようなものを使うことができます：

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

境界線のみを描画します。fillRectをtrueに変更すると、塗りつぶされます。 requestAnimationFrameごとにキャンバスを更新できます。

しかし、paper.jsのようなライブラリを使用したいと思うかもしれません。これにより、オブジェクトのクリックなどがはるかに簡単になり、一度作成したオブジェクトにキャンバス上で描画を抽象化し、要求したとおりに後で更新することができます。

7
Julian