javascript - <canvas> 字母形状中的clearRect()

Question

我最近开始学习网络技术，所以对于几乎​​所有事情我仍然是新手。我偶然发现了这个投资组合网站，link ，我正在尝试“重新创建”它作为我学习过程/实践的一部分。

在这里，我对页面的背景以及如何在 Canvas 上制作透明字母感兴趣。在我当前的工作中，我有一个html背景图像集，全屏上的fillRect()，不透明度为0.9，现在我不知道如何使用clearRect()。

问题是:我走在正确的轨道上吗？有什么我不知道的方法可以使用clearRect()来清除 Canvas 上字母形状的像素吗？就像，无需手动定义clearRect()的路径，但我只会输入一个字母并清除其形状中的像素。抱歉，如果我以错误的方式在下面发布了当前的代码，这是我第一次在这里发布。

var canvas = document.getElementById('layout');
if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
}
$(document).ready(function() {
    window.addEventListener('resize', setCanvasSize); //false
    window.addEventListener('resize', draw); //false
    //set canvas size----------------------------------------
    setCanvasSize();

    function setCanvasSize() {
        canvas.width = $(window).width();
        canvas.height = $(window).height();
    }
    //draw---------------------------------------------------
    draw();

    function draw() {
        var x = canvas.width;
        var y = canvas.height;
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, x, y);
        ctx.clearRect(50, 30, 110, 35);
    }
});

Answer 1

您可以使用globalCompositeOperation来实现这样的效果.

下面是一个示例，其中一些文本用作形状来删除绘制的像素:

var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 200;
var ctx = canvas.getContext("2d");

document.body.appendChild(canvas);

ctx.fillStyle = "rgba(255, 255, 255, 0.8";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.globalCompositeOperation = "destination-out";
ctx.font = "70pt Arial";
ctx.fillText("Text", 50, 130);

这是 JSFiddle:http://jsfiddle.net/eSpUv/