Question

我试图将画布上下文与实际绘制函数分开但不起作用。作为上下文的一部分，我希望包括调整不起作用的画布的能力。 HTML工作正常，因为getElementbyID工作很明显。工作正常的绘图功能可供参考。

window.onload = function() {
    'use strict';
    var ctx = getCanvas();
    draw(ctx);
}
function getCanvas() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var w = canvas.width = 200;
    var h = canvas.height = 150;
    return ctx;
}
function draw(ctx) {
    ctx.fillStyle = 'rgb(200, 0, 0)';
    ctx.fillRect(10, 10, 50, 50);
    ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
    ctx.fillRect(30, 30, 50, 50);
}

Answer 1

我发现您的代码没有任何问题。它按预期工作。

window.onload = function() {
    'use strict';
    var ctx = getCanvas();
    draw(ctx);
};

function getCanvas() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var w = canvas.width = 200;
    var h = canvas.height = 150;
    return ctx;
}

function draw(ctx) {
    ctx.fillStyle = 'rgb(200, 0, 0)';
    ctx.fillRect(10, 10, 50, 50);
    ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
    ctx.fillRect(30, 30, 50, 50);
}

canvas{border: 1px solid black}

<canvas id="canvas" width="1000" height="1000"></canvas>

注意：使用css（在第一位）设置不设置canvas 的宽度和高度。

Canvas Javascript绘制功能不起作用

1 个答案: