HTML5 Canvas: Comment frontière un fillRect?

En HTML5, je veux faire une fillRect() (avec une couleur de remplissage blanc) et un border (noir). Je ne veux pas utiliser strokeRect() à moins que je puisse remplir plus tard. Je suis en train de faire un jeu où vous cliquez sur les carrés et ils changent de couleur (c'est plus complexe que ça, mais qu'est ce que cela met l'accent sur).

<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>

La frontière autour de la toile est pour référence.
Je peux utiliser les CSS, mais actuellement tout est en HTML.

autant que je sache, il y a seulement deux façons de le faire, soit dessiner la bordure autour de l'élément canvas, ou de tracer la frontière à l'intérieur de la toile à l'aide de la strokeRect(). Je ne comprends toujours pas bien, pourquoi vous ne pouvez pas utiliser aucune de ces options.

OriginalL'auteur I. Golsby | 2016-07-03

  1. 5

    Travail de la position que vous voulez dessiner le carré de la largeur et de la hauteur. Une fois que vous aurez fait cela, il suffit de dessiner un grand carré premier qui est plus large par 2 et plus par 2, mais avec le même point central. Si vous dessinez un carré qui est plus grand et ensuite, vous dessinez la normale carrés sur le dessus, cela vous donne l'illusion de la place a une frontière

    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 lien : https://jsfiddle.net/jxgw19sh/2/

    -- Update --

    Ajouter un paramètre supplémentaire à drawBorder appelé thickness la valeur par défaut est 1, mais vous pouvez fournir tout autre numéro thickness dans la fonction et la il aura de la valeur d'usage au lieu de 1.

    L'appel de strokeRect permettrait d'éviter la position de recalculs.

    OriginalL'auteur Canvas

  2. 6

    vous ne pouvez pas le remplir plus tard, sans une bibliothèque. Si vous voulez changer quelque chose simplement redessiner.
    Vous pouvez utiliser quelque chose comme ça:

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

    il tirera seulement de la frontière, si vous modifiez fillRect à true il sera rempli. Vous pouvez mettre à jour votre toile sur tous les requestAnimationFrame.

    Mais peut-être que vous souhaitez utiliser une bibliothèque comme paper.js. Il fait des choses comme cliquant sur des objets beaucoup plus facile et il les résumés dessine sur la toile des objets que vous créez en une fois et de mettre à jour plus tard, comme ce que vous avez demandé.

    OriginalL'auteur Julian