09Canvas——文字绘制

最新推荐文章于 2024-08-11 23:28:33 发布
最新推荐文章于 2024-08-11 23:28:33 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： # html5学习 htmlcss学习园地 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47197906/article/details/119578643
版权

文章目录

1、fillText() 方法

使用 fillText() 方法在在画布上绘制实心文本。语法为：

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

参数说明：

  • text 规定在画布上输出的文本。
  • x 表示开始绘制文本的 x 坐标位置（相对于画布）。
  • y 表示开始绘制文本的 y 坐标位置（相对于画布）。
  • maxWidth 表示允许的最大文本宽度，以像素计。可选。
<body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
        对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
        //获取canvas元素
        var myCanvas = document.getElementById('mycanvas');
        //获取Context上下文
        var ctx = myCanvas.getContext('2d');
        //绘制实心文本
        ctx.fillText('Hello Syl!',10,50)
    </script>
</body>

在这里插入图片描述

2、strokeText() 方法

使用 strokeText() 方法在画布上绘制空心文本。语法为：

ctx.strokeText(text, x, y, maxWidth);

注：参数说明与 fillText() 方法一致。

<body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
        对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
        //获取canvas元素
        var myCanvas = document.getElementById('mycanvas');
        //获取Context上下文
        var ctx = myCanvas.getContext('2d');
        //设置字体样式
        ctx.font = '50px Georgia';
        //绘制空心文本
        ctx.strokeText('Hello Syl!',10,50)
    </script>
</body>

在这里插入图片描述

3、font属性

使用 font 属性设置或返回画布上文本内容的当前字体属性。font 属性使用的语法与 CSS font 属性相同。

4、textAlign 属性

使用 textAlign 属性设置或返回文本内容的当前对齐方式。

ctx.textAlign = 'center|end|left|right|start';

参数说明：

  • start 默认值，表示文本在指定的位置开始。
  • center 表示文本的中心被放置在指定的位置。
  • end 表示文本在指定的位置结束。
  • left 表示文本左对齐。
  • right 表示文本右对齐。

注：使用 fillText() 或 strokeText() 方法在实际地在画布上绘制并定位文本。

<body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
        对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
        //获取canvas元素
        var myCanvas = document.getElementById('mycanvas');
        //获取Context上下文
        var ctx = myCanvas.getContext('2d');
        //画一条线便于展示
        ctx.strokeStyle = 'blue';
        ctx.moveTo(200, 20);
        ctx.lineTo(200, 180);
        ctx.stroke();
        //设置字体样式
        ctx.font = '20px Georgia';
        //值为start的情况
        ctx.textAlign = 'start';
        ctx.strokeText('Hello Syl!', 200, 20);
        //值为center的情况
        ctx.textAlign = 'center';
        ctx.strokeText('Hello Syl!', 200, 60);
        //值为end的情况
        ctx.textAlign = 'end';
        ctx.strokeText('Hello Syl!', 200, 100);
        //值为left的情况
        ctx.textAlign = 'left';
        ctx.strokeText('Hello Syl!', 200, 140);
        //值为right的情况
        ctx.textAlign = 'right';
        ctx.strokeText('Hello Syl!', 200, 180);
    </script>
</body>

在这里插入图片描述

5、textBaseline 属性

textBaseline 属性设置或返回在绘制文本时的当前文本基线。语法为：

ctx.textBaseline = 'alphabetic|top|hanging|middle|ideographic|bottom';

参数说明：

  • alphabetic 表示文本基线是普通的字母基线。默认值。
  • top 表示文本基线是 em 方框的顶端。
  • hanging 表示文本基线是悬挂基线。
  • middle 表示文本基线是 em 方框的正中。
  • ideographic 表示文本基线是表意基线。
  • bottom 表示文本基线是 em 方框的底端。
<body>
<!--添加canvas元素，设置画布的大小-->
<canvas id="mycanvas" width="1314px" height="1314px">
    对不起，你的浏览器不支持canvas
</canvas>

<script type="text/javascript">
    //获取canvas元素
    var myCanvas = document.getElementById('mycanvas');
    //获取Context上下文
    var ctx = myCanvas.getContext('2d');
    //画一条线便于展示
    ctx.strokeStyle = 'blue';
    ctx.moveTo(20, 100);
    ctx.lineTo(1314, 100);
    ctx.stroke();
    //设置字体样式
    ctx.font = '30px Georgia';
    //值为alphabetic的情况
    ctx.textBaseline = 'alphabetic';
    ctx.fillText('Hello Syl!', 20, 100);
    //值为top的情况
    ctx.textBaseline = 'top';
    ctx.fillText('Hello Syl!', 220, 100);
    //值为hanging的情况
    ctx.textBaseline = 'hanging';
    ctx.fillText('Hello Syl!', 420, 100);
    //值为middle的情况
    ctx.textBaseline = 'middle';
    ctx.fillText('Hello Syl!', 620, 100);
    //值为ideographic的情况
    ctx.textBaseline = 'ideographic';
    ctx.fillText('Hello Syl!', 820, 100);
    //值为bottom的情况
    ctx.textBaseline = 'bottom';
    ctx.fillText('Hello Syl!', 1020, 100);
</script>
</body>

在这里插入图片描述

远近2021
关注
专栏目录
canvas绘制文本
星星有所不知
03-21 357
canvas绘制文本 fillText(text, x, y, [, maxWidth]); //在指定的(x, y)位置填充指定的文本，绘制的最大宽度是可选的,若设置了最大宽度，且字体实际宽度大于最大宽度，则字体会被压缩。 strokeText(text, x, y, [, maxWidth]); //在指定的(x, y)位置绘制文本边框，绘制的最大宽度是可选的。 font = value;/...
Canvas:绘制文本
lh_qppr的博客
10-19 717
渲染文本 文本样式 文本测量
Canvas学习笔记三 - 绘制文本
blog
03-26 523
一、 绘制文本 方法 描述 fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的. strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta
Canvas 自定义扩展方法：文字自动换行
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-11 1264
基本概念与作用说明示例一：基础使用扩展 Canvas 上下文示例二：扩展 Canvas 上下文不同角度的功能使用思路示例三：居中对齐的换行文本示例四：右对齐的换行文本实际工作中的使用技巧示例五：动态调整字体大小以适应容器实战技巧结束语Canvas API 提供了强大的绘图功能，但默认并不支持自动换行。为了满足现代 Web 应用的需求，特别是在有限的空间内展示多行文本，本文将介绍如何为 Canvas 上下文扩展自定义方法来实现文字自动换行功能。
canvas - 绘制文本
itmacy的博客
06-09 359
在上个例子中，简单演示了在canvas上加载图片，这个例子则在之前的基础上，使用canvas绘制文本，即在图片上加上水印。使用以下代码，可以在canvas上绘制文本。// 设置填充画笔颜色，即字体颜色。'大家好，我是itmacy'// 绘制 "实心" 文字;// // 绘制图片。// 加载原图片大小。// 等比例缩放图片。
canvas学习——绘制文本
xm2by的博客
09-05 1246
canvas实践——绘制文本
canvas学习day2——绘制文字，饼图升级
weixin_41571938的博客
04-26 324
绘制文字 效果图 非常简单，就是给固定文字填充或者描边而已 var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d'); /* * 设置文字的属性 * ctx.font = 和css语法一样。 * 注意：这里设置字体大小时必须带单位，单位支持css的所有表示方式。 * 注意：单独设置字体大小不会生效，必须要加一个额外属性样式。
Canvas ——画函数线
qq_45935715的博客
04-29 1096
请运用HTML5的Canvas功能，画出以下的三个数学图形。使用Math.sin(x), Math.exp(x)函数，其中x以Math.PI(3.14159)为单位。请同学完成此网页内容与相应所需的java script。
神奇的canvas——巧用 canvas 为图片添加水印
findhappy117的博客
03-08 1万+
代码地址如下：http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章，是通过 canvas 来实现一个绚丽的动画效果，不管看过没看过的小伙伴都可以直接猛戳下面的链接直达这篇文章哦！因为之前很多篇都是偏向理论的，所以这次决定上点实际的内容——通过 canvas 为图片添加自定义水印，并且在文章末尾也会附上源码。下面进入正文~~~添加
vue canvas应用 —— 页面文字内容生成一张图片
且听风吟的博客
11-17 2554
根据页面文字内容生成一张图片（1）首先，安装 html2canvas 库：（2）页面中引入：（3）具体使用： 遇到了一需求，根据页面内容，生成一张图片，网上查找了相关资料，可以用html2canvas来实现。具体实现如下： （1）首先，安装 html2canvas 库： 引入方式： npm安装： npm install --save html2canvas yarn安装： yarn add html2canvas （2）页面中引入： import html2canvas from 'html2can
HTML5 在canvas中绘制文本附效果图
12-14
一、绘制文本 在绘图环境中提供了两种方法在canvas中绘制文本。 strokeText(text,x,y) ： 在(x,y)处绘制空心的文本。 fillText(text,x,y) ： (x,y)处绘制实心的文本。 二、在canvas中绘制文本 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-type” content=”text/html; charset = utf-8″> <title>HTML5</title> <script type=”text/javascript” charset =
学习Canvas基础-绘制文字
qq_67983277的博客
11-23 3755
学习Canvas基础-绘制文字
WPF C# Canvas上绘制文字
arenascat的博客
07-30 7933
private void drawText(double x, double y, string text, Color color,Canvas canvasObj) { TextBlock textBlock = new TextBlock(); textBlock.Text = text; te...
canvas——绘制文字
热门推荐
sleepwalker_1992的专栏
06-04 4万+
1、 绘制上下文的文字属性 font 设置或返回文本内容的当前字体属性 * font 属性使用的语法与 CSS font 属性相同。 例如：ctx.font = "18px '微软雅黑'"; textAlign 设置或返回文本内容的当前对齐方式 * start : 默认。文本在指定的位置开始。 * end : 文本在指定的位置结束。 ...
canvas应用——绘制文本
樊小书生
06-01 1658
学习最好的方式就是一边看文档，一边动手，这样可以加深记忆。关于canvas绘制文本的内容你可以点击此处查看 例子 ，进行更好的互动学习。 渲染文本方式 填充文本：fillText(text, x, y [, maxWidth]) 边框文本：strokeText(text, x, y [, maxWidth]) 参数说明： text:要渲染的文本内容 x:开始渲染文本的x坐标 y:...
HTML5 canvas绘制文本
One of thre_tigers的博客
01-27 1109
HTML5的canvas也提供渲染文本的方法. 1.绘制文本方法：fillText和strokeText fillText(text,x,y[,maxWidth]) 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的. strokeText(text,x,y,[,maxWidth]) 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的 fillText样例 function ...
canvas文字绘制（大小、粗体、倾斜、对齐、基线）
一起coding，一起嗨。
08-09 2万+
canvas文字绘制文字填充方式、字体各种设置属性。
33 canvas绘制文本
丨Anna丨的博客
10-29 405
33 canvas绘制文本 1绘制文本 语法 canvas 提供了两种方法来渲染文本: fillText(text, x, y) 在指定的(x,y)位置填充指定的文本 strokeText(text, x, y) 在指定的(x,y)位置绘制文本边框 示例 <head> <meta charset="UTF-8"> <title>18_绘制文本</title> <style> #test{ .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值