canvas画布透明度变化

这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战

canvas

首先来介绍一下canvas （这篇文章本身是有点水的💦）

Canvas API 提供了一个通过JavaScript和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API主要聚焦于2D图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。

通常很多网页游戏的绘制也是在canvas上完成的，比如网页版三国杀之类。 使用canvas的好处是：

• Canvas绘制效率高
• 事件分发由canvas处理，绘制的内容的事件需要自己做处理

globalAlpha属性

在canvas中，可以利用画布的透明度变化来达到一些特殊的效果，像呼吸渐变等模式。

比如像下面的效果就是我利用canvas的透明度做出来的：

在canvas当中，存在globalAlpha属性

CanvasRenderingContext2D .globalAlpha 是 Canvas 2D API 用来描述在canvas上绘图之前，设置图形和图片透明度的属性。 数值的范围从 0.0 （完全透明）到1.0 （完全不透明）。

使用的语法是：

ctx.globalAlpha = value;

官方说明：developer.mozilla.org/zh-CN/docs/…

我构建了一个透明度改变的方法EXdraw，此方法中通过对globalAlpha属性的修正来做到改变透明度的效果：

EXctx.fillStyle = "#4DCDE3";
function EXdraw():void {
    opacity += addnum;

    EXctx.clearRect(0, 0, 500, 500);
    if (opacity >= 0){
        EXctx.globalAlpha = opacity;
        EXctx.fillRect(100, 100, 300, 300);
        EXctx.save();
        EXctx.fillStyle = "#F02162";
        EXctx.fillText('一', 180, 300);
        EXctx.restore();
        if (opacity >= 1) {
            addnum = -addnum;
        }
    } else {
        addnum = -addnum;
    }
    window.requestAnimationFrame(EXdraw);
}

在我的例子当中，我使用了window.requestAnimationFrame去执行透明度改变的方法，当然也可以调用setInterval来完成类似的效果。

之前我会关注到canvas也是看到了网上一篇很有意思的博客：《黑客帝国代码雨以及其灵活使用——道家真言》

在这篇博客当中的道家真言实现原理其实也是相类似的：

其中核心的部分就在于文字fillText的绘制时的位置变换：

arr.forEach(function (value, index) {
        console.log(value)
        ctx.font = "50px 华文行楷";
        var text = str[Math.floor(Math.random() * str.length)]
        ctx.fillText(text, index * 50, value + 50);
        arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 50;
});