javascript - Canvas 使用字母而不是形状？

Question

我写了一个例子，作为 Canvas 新手，我需要帮助将基本圆圈转换为字母。

Fiddle

这是您将在 fiddle 中看到的代码。请注意，圆圈绘图位于 Canvas 的中心，我尝试使用像 B 这样的带有很酷字体的字母来代替圆圈，我只是不确定如何实现这一点。

所以想象一下圆圈是那个位置的字母，仍然透明，矩形覆盖图像的颜色 rgba(255,255,255,0.7) .

var canvas = document.getElementById('c');

// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    /**
     * Your drawings need to be inside this function otherwise they will be reset when 
     * you resize the browser window and the canvas goes will be cleared.
     */
    drawStuff();
}
resizeCanvas();

function drawStuff() {

    if (canvas.getContext) {

        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 70;

        // Full rectangle
        context.fillStyle = 'rgba(255,255,255,0.7)';
        context.fillRect(0, 0, window.innerWidth, window.innerHeight);

        // Inner circle
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

        // Add a letter instead of a circle?

        // Hmm
        context.fillStyle = 'rgba(0,0,0,1)';
        context.globalCompositeOperation = 'destination-out';
        context.fill();

    }
}

Answer 1

为什么不

context.fillStyle = 'rgba(0,0,0,1)';
context.strokeStyle = "#F00";
context.font = "bold 60pt Arial";
context.globalCompositeOperation = 'destination-out';
context.fillText("B", 20, 50);

http://jsfiddle.net/pqD87/