画布箭头不显示在Chrome中

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×150像素。

如果您使用CSS来调整画布，比方说，500×500像素，然后在画布坐标将被拉长，使（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