Question

在我将HTML中的画布设置为特定大小（例如800x600）之后，脚本将不会为我填充，但如果我将其设置为150x150，它将会。为什么会这样？可以修复吗？任何帮助将不胜感激。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Let's Draw!</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body onload="drawShape();">
        <canvas id="my_canvas" width="800" height="600">
            This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>
    </body>
</html>

使用Javascript：

function drawShape(){
    var canvas = document.getElementById('my_canvas');

    if (canvas.getContext){

        var ctx = canvas.getContext('2d');  // ctx = context

        ctx.fillStyle = "red";

        // Filled triangle
        ctx.beginPath();
        ctx.moveTo(25,25);
        ctx.lineTo(105,25);
        ctx.lineTo(25,105);
        ctx.fill();

        // Stroked triangle
        ctx.beginPath();
        ctx.moveTo(125,125);
        ctx.lineTo(125,45);
        ctx.lineTo(45,125);
        ctx.closePath();
        ctx.stroke();

    } else {
        alert('You need Safari or Firefox 1.5+ to see this demo.');
    }
}

Answer 1

800x600相对较小，应该得到支持画布的所有合理浏览器的支持。画布4倍的画布应该可以使用。您使用的浏览器/操作系统是什么？

如果尺寸太大，Canvas无法执行填充

1 个答案: