Question

我想在HTML5画布中使用矩形创建一个关闭按钮，这里是框的代码：

function close_button(ctx)
{
    ctx.fillStyle = "red";
    ctx.fillRect(500, 30, 30, 30);
}

我的问题是我不知道如何在红色框的中间交叉，有人可以帮助我吗？

Answer 1

试试这个：

function close_button(x,y,side){

  ctx.fillStyle="red";
  ctx.fillRect(x, y, side, side);

  var shift = side/10;

  ctx.beginPath();
  ctx.moveTo(x + shift, y + shift);
  ctx.lineTo(x + side - shift, y + side - shift);
  ctx.moveTo(x + side - shift, y + shift);
  ctx.lineTo(x + shift, y + side - shift);
  ctx.strokeStyle = '#FFFFFF';
  ctx.stroke();
}

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = 300;
c.height = 300;

close_button(10, 10, 20);

canvas {
  width:300px;
  height:300px;
  background-color:#ffffff;
}

<canvas id="myCanvas"></canvas>

JSFiddle example

如何在html5画布中制作关闭按钮

1 个答案: