JavaScript 之 canvas（四）-- 绘制文字

最新推荐文章于 2024-01-24 10:16:53 发布

VIP文章小鹰丶

最新推荐文章于 2024-01-24 10:16:53 发布

阅读量1.9w

点赞数 8

分类专栏： # canvas # JavaScript 前端文章标签： javascript canvas 绘图 fillText 文本

本文链接：https://blog.csdn.net/jeremyjone/article/details/101950119

版权

本文原文地址：https://www.jeremyjone.com/485/，转载请注明，谢谢。

基本概念

在canvas中，为我们提供了一个非常方便的添加文字的方法，直接上 w3school 的文档说明：

context.fillText(text,x,y,maxWidth);

// text: 规定在画布上输出的文本。
// x: 开始绘制文本的 x 坐标位置（相对于画布）。
// y: 开始绘制文本的 y 坐标位置（相对于画布）。
// maxWidth: 可选。允许的最大文本宽度，以像素计。

官方也给我们提供了一个简单的说明：

使用 fillText()，在画布上写文本 “Hello world!” 和 “w3school.com.cn”：

file

具体代码：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);

ctx.font="30px Verdana";
// 创建渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变填色
ctx.fillStyle=gradient;
ctx.fillText("w3school.com.cn",10,90);

根据文档说明，可以很清楚fillText()的具体用法，那么接下来就来绘制我们自定义的文本。

绘制自定义文本

在绘制之前，我们需要清楚，网页中的文字都是由输入框来交互的，canvas并不具备这样的功能，所以，我们先简单写一个具有canvas、input框和一个按钮页面，来模拟我们的效果。

其实，从这里就可以看出绘制文字的思路，这和我们平时的截图功能大致一样。

实际测试地址：点击这里开始测试

我们的示例效果如图：

代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS - Canvas - text</title>
</head>
<body style="background-color: #999">
    <div>
            <canvas id="canvas" width="800" height="200" style="background-color: #fff">抱歉，您的浏览器不支持canvas元素</canvas>
    </div>
    <textarea name="textBox" id="textBox" cols="30" rows="10"

最低0.47元/天解锁文章

小鹰丶

关注

8
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 之 canvas（四）-- 绘制文字

本文原文地址：https://www.jeremyjone.com/485/，转载请注明，谢谢。基本概念在canvas中，为我们提供了一个非常方便的添加文字的方法，直接上 w3school 的文档说明：context.fillText(text,x,y,maxWidth);// text: 规定在画布上输出的文本。// x: 开始绘制文本的 x 坐标位置（相对于画布）。// y:...
复制链接

扫一扫