canvas 实现艺术字背景 canvas API中文网一个博主 canvas API翻译本教程的demo Canv

背景

Canvas 基础知识

首先了解下canvas Api都干些什么，无非是对线段，图形，文字的操作。

canvas 画布

canvas 默认是 300x150 大小，如果我们想要画布中的图形保持不变，只是改变画布本身的大小，用css设置画布大小，则会出现问题。

在对canvas进行 css进行设置，出现如下图所示，canvas画布大小被放大两倍，画布里面文字也被放大两倍。

canvas {
    width: 600px;
    height: 300px;
}

重点：css设置 canvas 画布和里面的元素是整体按比例放大缩小的。

画布中的图形保持不变，只是改变画布本身的大小，设置canvas的2种方式：

// 方式一：html 元素上设置
<canvas width="600" height="300"></canvas>

// 方式二：canvas 上面设置
const canvas = document.querySelector('canvas');
canvas.width = 600;
canvas.height = 300;

所以这里思考css和js设置两个到底影响了什么？

canvas 坐标系

HTML5 Canvas中的坐标系统以左上角为其原点（0, 0）。如下图所示，设置字体的 textAlign 和 textBaseline 对字体位置的影响。

canvas 上下文

canvas中的属性是基于全局状态的设置，是对整个画布的设置。例如：

// html
<canvas></canvas>

// js
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.font="30px STHeiTi";
ctx.fillStyle = 'red';
ctx.fillText("30号字体红色",10,140); // 输出红色字体
ctx.fillText("30号字体绿色",10,140); // 输出红色字体
ctx.fillStyle = 'green';
ctx.fillText("30号字体绿色",10,140); // 输出绿色字体

因为 fillStyle 重制了画布填充颜色从而变成了绿色，不然设置过是红色，后续图形的填充颜色都是红色。因此我们需要下次重新设置新属性，当然线段图形也是如此。

如果是画线段或者图形，需要beginPath()重制，开始一个新的路径后，这样，就和之前绘制的路径给分开了。

canvas 影响文本的属性

`font`

字体的样式、字体的变体、字体的粗细、字号和行高、字体外观

context.font = "[font-style] [font-variant] [font-weight] [font-size/line-height] [font-family]"

`textAlign` `textBaseline`

textAlign 文本对齐方式，包含left center right start end

textBaseline 文本对齐的基线，包含top middle bottom hanging alphabetic ideographic

`fillStyle` `strokeStyle`

fillStyle 文字和图形填充的样式。包含color gradient pattern

strokeStyle 文字和图形描边的样式。包含color gradient pattern

`measureText()`

测量文本的一些数据。注意：目前只有宽度，没有高度。阴影，描边都不会测量出来，只能测量设置的文本大小占据的宽度。

// 只能衡量宽度，常用于文本的自动换行
context.font = '24px STHeiTi, SimHei';
var textZh = context.measureText('帅');
context.fillText('帅', 60, 50);
console.log(textZh.width)

canvas 绘制

canvas 中可以把图形绘制道画面的方法有两个:确定绘制 fill()和stroke() ，把文字绘制到画面的方法有两个：确定绘制 fillText()和strokeText() ，因此只有4个方法确定绘制。有点绘画基础的应该知道，前者是指填充，后者是指描边。因为我们只是绘制线条，所以只要描边就可以了。

Canvas 效果实现

一些坑

先渲染描边再渲染文字

1、先渲染描边再渲染文字的效果：

2、如果先渲染文字，再渲染描边有可能出现文字没有上色

学习路径

canvas -> webgl -> three.js

canvas 实现艺术字

背景