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

我最近开始学习网络技术，因此我还是几乎所有方面的新手。我偶然发现了这个投资组合网站link，我打算在学习过程/练习中“重新创建”该网站。

在这里，我对页面的背景以及如何在画布上制作透明字母感兴趣。在我目前的工作中，我在全屏上有一个html背景图像集fillRect（），其不透明度为0.9，而现在我不知道如何利用clearRect（）。

问题是：我走在正确的轨道上吗？有什么我不知道的方式可以使用clearRect（）清除字母形状的画布上的像素吗？就像，无需手动为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);
    }
});

最佳答案

您可以使用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/

关于javascript - <canvas> clearRect()以字母形状，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22115223/