css设置画布_使用HTML5画布和CSS混合模式设置灯光名称

css设置画布

Looking at Las Vegas signs from the 1950’s put me in mind to create a sparkly lighting effect for web page text. This version is derived from my TV static article, with which it shares some code.

回顾1950年代的拉斯维加斯标志，我想到的是为网页文本创建闪烁的灯光效果。 这个版本来自我的电视静态文章 ，它共享一些代码。

制作字幕 (Making a Marquee)

The markup consists of a <canvas> element, heading text, and a surrounding <div>. The h1 is contentEditable for section and alteration:

标记由<canvas>元素 ， 标题文本和周围的<div> 。 h1是contentEditable的部分和更改：

<div id="allofthelights">
    <canvas width="800" height="350"></canvas>
    <h1 contenteditable="true">Liza</h1>
</div>

The <canvas> and heading are held at the same location using position: absolute:

<canvas>和标题使用以下position: absolute保持在同一位置position: absolute ：

#allofthelights {
    position: relative;
    overflow: hidden;
}
#allofthelights canvas, #allofthelights h1 {
    width: 100%;
    position: absolute;
    top: 0;
}

As the first step to save on rendering time, the <canvas> element is given the default “off” state of the lights; where a light isn’t drawn, this color will appear instead.

作为节省渲染时间的第一步，为<canvas>元素指定了灯光的默认“关闭”状态。 如果没有绘制灯光，则会显示此颜色。

#allofthelights canvas {
    background: #e97f7b;
}

The <h1> is styled with vw units to scale with the page:

<h1>的样式以vw单位为单位以随页面缩放：

#allofthelights h1 {
    font-size: 10vw;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    padding: 2rem;
}

闪光 (Glitter)

The script at the end of the page starts by identifying the element and setting the light cell size, together with the light color:

页面末尾的脚本首先标识元素并设置灯光单元大小以及灯光颜色：

var nameLights = document.querySelector("#allofthelights canvas"),
context = nameLights.getContext("2d"),
lightSize = 6;
context.fillStyle = "#fbe1ca";

The central function:

中心功能：

function drawLights() {
    context.clearRect(0, 0, nameLights.width, nameLights.height);
    for (var v=60; v < nameLights.height - 30; v += lightSize){
        for (var h=0; h < nameLights.width; h += lightSize){
            if (Math.random()<.5) {
                context.fillRect(h + 1,v + 1, lightSize -1, lightSize - 1);
            }
        }
    }
    requestAnimationFrame(drawLights);
}
drawLights();

In order, the function:

依次，函数：

1. Clears the canvas space, removing any previous drawing.
   清除画布空间，删除任何先前的图形。
2. Starts drawing 60 pixels in from the top of the canvas (it will stop 30 pixels from the bottom) to save rendering time.
   从画布的顶部开始绘制60像素(从底部停止30像素)以节省渲染时间。
3. Starts drawing light cells horizontally.
   开始水平绘制光单元。

4. Makes a random coin toss to see if it should draw a light cell in the current location.

   进行随机抛硬币，以查看是否应在当前位置绘制一个发光单元。

5. if the toss is “heads”, draws a square 2 pixels smaller than the light cell size to create a visible grid” pattern.

   如果折腾是“头”，则绘制一个比光单元尺寸小2个像素的正方形，以创建可见的网格”图案。

百老汇 (Broadway)

Setting the heading text so that the canvas only shows through it uses a technique I detailed in a previous CSS blend modes article: the heading text is provided with a background fill and blend mode.

设置标题文本以使画布仅通过画布显示，这使用了我在CSS混合模式上一篇文章中详细介绍的技术：标题文本具有背景填充和混合模式 。

#allofthelights h1 {
    background: #fff;
    mix-blend-mode: lighten;
}

The result is what you can see at the top of this article.

结果就是您可以在本文顶部看到的内容。

为什么要使用CSS？ (Why CSS?)

It’s reasonable to ask why an HTML element and CSS blend modes were used when the Canvas API has its own blend modes, clipping paths, and support for text. In this case, there were several reasons:

当Canvas API具有自己的混合模式，剪切路径和文本支持时，为什么要使用HTML元素和CSS混合模式是合理的。 在这种情况下，有以下几个原因：

1. Text written into the canvas is rendered as pixels, not readable, selectable or searchable content. If you wanted text with equal accessibility purely in canvas, you’d have to write the text equivalent between the opening and closing tags:

   写入画布中的文本以像素形式呈现，而不是可读，可选或可搜索的内容。 如果您希望纯文本在画布中具有相同的可访问性，则必须在开始和结束标记之间编写等效的文本：

   <canvas width="800" height="350">Liza</canvas>

2. There’s no concept of “centering” text in the canvas context: I’d have to read the text size in JavaScript and nudge it inside the confines of the canvas space to simulate centering.
   在canvas上下文中没有“居中”文本的概念：我必须在JavaScript中读取文本大小，然后将其微调到画布空间的范围内以模拟居中。

That’s not to say that using a canvas-only approach is “wrong” - in some cases, it would make a lot of sense - just that I didn’t use it in this case.

这并不是说使用仅画布的方法是“错误的”-在某些情况下，这很有意义-只是在这种情况下我没有使用它。

少花哨的东西 (Something a Little Less Gaudy)

There are several ways you could reduce the “sparkles” of the text:

有几种方法可以减少文本的“火花”：

1. You could reduce the chance of a cell being filled by lowering the value used by Math.random()

   您可以通过降低Math.random()使用的值来减少填充单元格的机会

2. You could work in an “intermediate” color between the background and the full color for each cell, providing the impression of slowing down the animation.
   您可以在每个单元格的背景和全色之间使用“中间”颜色，以提供放慢动画效果的印象。

3. A setTimeOut or setInterval could be used to slow the animation further.

   setTimeOut或setInterval可用于进一步降低动画速度。

翻译自: https://thenewcode.com/1144/Set-Your-Name-In-Lights-with-HTML5-Canvas-and-CSS-Blend-Modes

css设置画布