canvas笔记-文字渲染

字体以及填充文字

程序运行截图如下：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">当前浏览器不支持canvas
</canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.font = "bold 40px Arial";context.fillStyle = "#058";context.fillText("中文ABC1234！@#￥%", 40, 100);}</script></body>
</html>

其中：

context.font = "bold 40px Arial";
context.fillStyle = "#058";
context.fillText("中文ABC1234！@#￥%", 40, 100);

其中：font指定了加粗bold与字体大小为40px及Arial。

使用fillStyle指定了颜色为#058，使用fillText设置了文字内容，以及再40，100处进行画文字。

如果使用描边进行绘画

源码如下：

<script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.font = "bold 40px Arial";context.fillStyle = "#058";context.fillText("中文ABC1234！@#￥%", 40, 100);context.strokeText("中文ABC1234！@#￥%", 40, 200);}</script>

程序运行截图如下：

再fillText与strokeText包含第四个参数，这个参数的意义是限制其宽度：

如下代码：

<script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.font = "bold 40px Arial";context.fillStyle = "#058";context.fillText("中文ABC1234！@#￥%", 40, 100);context.strokeText("中文ABC1234！@#￥%", 40, 200);context.fillText("中文ABC1234！@#￥%", 40, 300, 100);context.strokeText("中文ABC1234！@#￥%", 40, 400, 100);}</script>

程序运行截图如下：

下面是使用线性梯度进行渲染下：

程序运行截图如下：

源码如下：

window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.font = "bold 40px Arial";context.fillStyle = "#058";context.fillText("中文ABC1234！@#￥%", 40, 100);context.strokeText("中文ABC1234！@#￥%", 40, 200);context.fillText("中文ABC1234！@#￥%", 40, 300, 100);context.strokeText("中文ABC1234！@#￥%", 40, 400, 100);let linearGrad = context.createLinearGradient(0, 0, 800, 0);linearGrad.addColorStop(0.0, "red");linearGrad.addColorStop(0.1, "black");linearGrad.addColorStop(0.2, "green");linearGrad.addColorStop(0.3, "yellow");linearGrad.addColorStop(0.4, "orange");linearGrad.addColorStop(0.5, "purple");linearGrad.addColorStop(0.6, "teal");linearGrad.addColorStop(0.7, "pink");linearGrad.addColorStop(1.0, "brown");context.fillStyle = linearGrad;context.fillText("中文ABC1234！@#￥%", 40, 500);
}

下面是使用图片纹理的例子：

程序运行截图如下：

源码如下：

<script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.font = "bold 40px Arial";context.fillStyle = "#058";context.fillText("中文ABC1234！@#￥%", 40, 100);context.strokeText("中文ABC1234！@#￥%", 40, 200);context.fillText("中文ABC1234！@#￥%", 40, 300, 100);context.strokeText("中文ABC1234！@#￥%", 40, 400, 100);let linearGrad = context.createLinearGradient(0, 0, 800, 0);linearGrad.addColorStop(0.0, "red");linearGrad.addColorStop(0.1, "black");linearGrad.addColorStop(0.2, "green");linearGrad.addColorStop(0.3, "yellow");linearGrad.addColorStop(0.4, "orange");linearGrad.addColorStop(0.5, "purple");linearGrad.addColorStop(0.6, "teal");linearGrad.addColorStop(0.7, "pink");linearGrad.addColorStop(1.0, "brown");context.fillStyle = linearGrad;context.fillText("中文ABC1234！@#￥%", 40, 500);let bakgroundImage = new Image();bakgroundImage.src = "img/bg.jpg";bakgroundImage.onload = function(){let pattern = context.createPattern(bakgroundImage, "repeat");context.fillStyle = pattern;context.font = "bold 60px Arial";context.fillText("中文ABC1234！@#￥%", 40, 600);}}</script>

canvas笔记-文字渲染相关推荐

H5 canvas基础入门到捕鱼达人小游戏实现(3)-canvas运动入门,渐变,文字渲染,阴影
上一篇主要讲解了矩形柱状图,弧形和饼图的绘制,但是离我们的目标还是有点远,不要紧,我们基础api都还没有学习完,今天继续. 本节主要内容 - canvas画板制作 - 块的直线运动 - 粒子运动 - ...
threejs学习笔记：CSS2DObject 2d文字渲染
import {CSS2DRenderer,CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer.js";/ ...
微信小程序 canvas描绘文字图片生成图片并保存到本地
在实现这个功能时,遇到以下的问题: 1. canvas绘制文字的换行问题: 如果文字的长度大于你所定的宽度的话,文字会超出你所定宽度: 小程序的CanvasContext.fillText有一个max ...
【Android 应用开发】Canvas 绘制文字 ( 文字尺寸测量 | 基线绘制 )
文章目录 I . 文字尺寸测量 II . 基线绘制 I . 文字尺寸测量 1 . 精准绘制需求 : Canvas 绘制文字时 , 有时需要精准的控制文字的绘制 , 如绘制到指定的区域 , 居中 , 或 ...
微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生 ...
OpenGL text rendering文字渲染的实例
OpenGL text rendering文字渲染先上图,再解答. 完整主要的源代码源代码剖析先上图,再解答. 完整主要的源代码 #include <iostream> #inclu ...
React Canvas：高性能渲染 React 组
React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力,替代传统的 DOM 渲染,具有更接近 Native App 的使用体验.React Canvas 提供了一组标 ...
OpenGL基础55：文字渲染
一.FreeType库 FreeType是一个能够提供多种字体相关的操作的软件开发库,往往使用它来做最简单的文字渲染: OpenGL环境配置(超全整合版)FreeType库可以从这篇文章中的链接中下载 ...
android canvas添加文字居中,android Canvas drawText 文字居中
1首先利用canvas获取画布的宽高, //获取屏幕的宽和高 int width = canvas.getWidth(); int height = canvas.getHeight(); 2获取文字 ...

canvas笔记-文字渲染

canvas笔记-文字渲染相关推荐

最新文章

热门文章