web-dev-qa-db-fra.com

HTML5 Canvas: comment encadrer un fillRect?

En HTML5, je veux créer une fillRect() (avec une couleur de remplissage blanche) et un border (noir). Je ne veux pas utiliser strokeRect() sauf si je peux le remplir plus tard. Je fais un jeu où vous cliquez sur des carrés et ils changent de couleur (c'est plus complexe que ça mais c'est sur cela que ça se concentre).

<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 bordure autour de la toile est pour référence. Je peux aussi utiliser CSS, mais actuellement tout est en HTML.

javascriptcsshtmlcanvas
11
I. Golsby

Déterminez la position que vous souhaitez tracer avec la largeur et la hauteur. Une fois que vous avez fait cela, dessinez simplement un plus grand carré en premier qui a plus de 2 et plus de 2 mais avec le même point central. Donc, vous dessinez un carré qui est plus grand, puis vous dessinez le carré normal sur le dessus, cela vous donne alors l'illusion que le carré a une bordure

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));
}

lien jsfiddle: https://jsfiddle.net/jxgw19sh/2/

-- Mettre à jour --

Ajoutez un paramètre supplémentaire à drawBorder appelé thickness la valeur par défaut est 1 mais vous pouvez fournir n'importe quel autre numéro pour thickness dans la fonction et il utilisera la valeur au lieu de 1.

7
Canvas

vous ne pouvez pas le remplir plus tard sans bibliothèque. Si vous voulez changer quelque chose, redessinez simplement. 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 ne dessinera que la bordure, si vous changez fillRect en true il sera rempli. Vous pouvez mettre à jour votre toile sur chaque requestAnimationFrame.

Mais vous voulez peut-être utiliser une bibliothèque comme paper.js. Cela rend les choses comme cliquer sur les objets beaucoup plus faciles et il abstrait dessine sur la toile des objets que vous créez une fois et mettez à jour plus tard, comme ce que vous avez demandé.

7
Julian