Question

我最近开始学习网络技术，所以我仍然是一个关于几乎所有事情的新手。我偶然发现了这个投资组合网站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);
    }
});

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/

<canvas> clearRect（），字母形状</canvas>

1 个答案: