Question

我使用下面的代码在画布上绘制了一个箭头。

  window.onload = function() {
    var canvas   = document.getElementById("arrow");
    var context  = canvas.getContext("2d");

    context.beginPath();
    context.strokeStyle  = "red";
    context.fillStyle    = "red";

    context.moveTo(150, 400);
    context.lineTo(400, 400);
    context.lineTo(375, 375);
    context.arcTo(400, 400, 375, 425, 35);

    context.lineTo(400, 400);
    context.stroke();
    context.fill();
  });

但屏幕上没有显示箭头。

Answer 1

在HTML5 spec中，canvas元素的默认坐标大小为300×150px。

如果您使用CSS将画布调整为500×500px，则画布坐标将被拉伸，以便（300,150）仍然是画布的右下角：http://jsfiddle.net/Mh4uH/

您还需要应用画布width和height属性：

<canvas id="arrow" width="500" height="500"></canvas>

或者，您可以使用JavaScript设置宽度和高度以匹配屏幕尺寸（http://jsfiddle.net/Mh4uH/1/）：

canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

另请参阅：canvas default size

Chrome中未显示画布箭头

1 个答案: