HTML5 Canvas: как ограничить fillRect?

Question

HTML5 Canvas: как ограничить 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.

599 2

javascript html css html5 canvas

2 ответов:

Comments

Ничего не найдено.

Canvas · Accepted Answer · 2016-07-04 02:04:47

Определите положение, в котором вы хотите нарисовать квадрат с шириной и высотой. Как только вы это сделаете, просто нарисуйте сначала больший квадрат, который шире на 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 link : https://jsfiddle.net/jxgw19sh/2/

-- обновление --

Добавьте дополнительный параметр в drawBorder, называемый thickness значение по умолчанию равно 1, но вы можете ввести в функцию любое другое число для thickness, и она будет использовать значение вместо 1.

Julian · Accepted Answer · 2017-12-14 20:59:30

Вы не можете заполнить его позже без библиотеки. Если вы хотите что-то изменить, просто перерисуйте. Вы можете использовать что-то вроде этого:
ctx.fillStyle = 'blue';
ctx.strokeStyle = 'red';
var fillRect = false;
ctx.rect(20, 20, 150, 100);
if (fillRect) {
  ctx.fill();
}
ctx.stroke();
Он будет рисовать только границу, если вы измените fillRect на true он будет заполнен. Вы можете обновить свой холст на каждом requestAnimationFrame.

Но, может быть, вы хотите использовать библиотеку, как бумагу.JS. Это делает такие вещи, как нажатие на объекты намного проще, и это абстрагирует рисует на холсте к объектам, которые вы создали один раз и обновить позже, как то, что вы просили.