1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>19-Canvas绘制文字</title>

 6     <style>

 7         *{

 8             margin: 0;

 9             padding: 0;

10         }

11         canvas{

12             display: block;

13             margin: 0 auto;

14             background: red;

15         }

16     </style>

17 </head>

18 <body>

19 <canvas width="800" height="400"></canvas>

20 <script>

21     // 1.拿到canvas

22     let oCanvas = document.querySelector("canvas");

23     // 2.从canvas中拿到绘图工具

24     let oCtx = oCanvas.getContext("2d");

25     // 3.绘制参考线

26     let canvasWidth = oCtx.canvas.width;

27     let canvasHeight = oCtx.canvas.height;

28     oCtx.moveTo(0, canvasHeight/2);

29     oCtx.lineTo(canvasWidth, canvasHeight/2);

30     oCtx.stroke();

31     oCtx.moveTo(canvasWidth/2, 0);

32     oCtx.lineTo(canvasWidth/2, canvasHeight);

33     oCtx.stroke();

34     // 4.绘制文字

35     let str = "小白兔真可爱两只耳朵竖起来";

36     // 通过font属性可以设置文字的大小和样式

37     oCtx.font = "50px 微软雅黑";

38     // 通过textBaseline属性可以设置文字垂直方向的对齐方式

39     // 注意点: 在对齐的时候是以绘制文字的y作为参考点进行对齐的

40     oCtx.textBaseline = "middle";

41     // 通过textAlign属性可以设置文字水平方向的对齐方式

42     // 注意点: 在对齐的时候是以绘制文字的x作为参考点进行对齐的

43     oCtx.textAlign = "center";

44     /*

45     注意点:

46     在绘制文字的时候, 是以文字的左下角作为参考点进行绘制

47     * */

48     //不填充文字

49     // oCtx.strokeText(str, canvasWidth/2, canvasHeight/2);

50     //填充文字

51     // oCtx.fillText(str, canvasWidth/2, canvasHeight/2);

52 </script>

53 </body>

54 </html>

19-canvas绘制文字的更多相关文章

  1. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  2. 【朝花夕拾】Android自定义View篇之（三）Canvas绘制文字

    前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...

  3. 微信小程序生成海报分享：canvas绘制文字溢出如何换行

    主要思路: 1.先分割为字符串数组,然后一个字一个字绘图,利用ctx.measureText(string) 方法,获取绘制后的宽度,判断宽度在多少内就另起一行,再将各行拼成一个字符串 2.计算另起的 ...

  4. canvas绘制文字

    绘制字体时可以使用fillText方法或者strokeText方法. fillText方法用填充的方式来绘制字符串 context.fillText (text, x,y,[maxwidth]); s ...

  5. Canvas入门（3）:图像处理和绘制文字

    来源:http://www.ido321.com/997.html 一.图像处理(非特别说明,所有结果均来自最新版Google) 在HTML 5中,不仅可以使用Canvas API绘制图形,也可以用于 ...

  6. 测试canvas绘制旋转文字的性能

    canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一 ...

  7. canvas绘制简单图形

    canvas绘图篇: canvas绘制矩形: <!DOCTYPE html> <html> <head lang="en"> <meta ...

  8. h5学习-canvas绘制矩形、圆形、文字、动画

    绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  9. Android 使用Canvas在图片上绘制文字

    一个小应用,在图片上绘制文字,以下是绘制文字的方法,并且能够实现自动换行,字体自动适配屏幕大小 private void drawNewBitmap(ImageView imageView, Stri ...

  10. 【canvas学习笔记四】绘制文字

    本节我们来学习如何绘制文字. 绘制文字有两个主要的方法: fillText(text, x, y [, maxWidth]) 在x, y位置填充文字text,有一个可选参数maxWidth设置最大绘制 ...

随机推荐

  1. format( )函数

    在Python中,DETAIL_URL.format(id=id) 是一个字符串格式化的表达式.它通常用于根据一个已定义的字符串模板 DETAIL_URL 来生成一个新的字符串.在这个模板中,会包含一 ...

  2. FEL - Fast Expression Language

    开源好用的表达式计算语言FEL,可惜了官网文档不在国内,我来copy个过来. Fel是轻量级的高效的表达式计算引擎 Fel在源自于企业项目,设计目标是为了满足不断变化的功能需求和性能需求. Fel是开 ...

  3. Flutter 借助SearchDelegate实现搜索页面，实现搜索建议、搜索结果，解决IOS拼音问题

    搜索界面使用Flutter自带的SearchDelegate组件实现,通过魔改实现如下效果: 搜素建议 搜索结果,支持刷新和加载更多 IOS中文输入拼音问题 界面预览 拷贝源码 将SearchDele ...

  4. Service Mesh技术详解

    深入探讨Service Mesh的基本概念和核心技术,涵盖了服务发现.负载均衡.断路器与熔断机制,以及数据平面与控制平面的详细工作原理和实现方法. 关注作者,复旦博士,分享云服务领域全维度开发技术.拥 ...

  5. SpringMVC-01-回顾MVC架构

    1.什么是MVC MVC是模型(Model).视图(View).控制器(Controller)的简写,是一种软件架构模式. 它通过将业务逻辑.页面控制.显示视图分离的方法来组织代码. 主要作用是降低了 ...

  6. ADB命令与Dumpsys alarm查看应用程序唤醒命令

    ADB命令与Dumpsys alarm查看应用程序唤醒命令 背景 在研究设备的低功耗突然唤醒时,看到了对应的唤醒源: [ 75.813476] suspend ns: 75813465022\x09s ...

  7. 浅谈k8s中cni0和docker0的关系和区别

    最近在复习k8s网络方面的知识,查看之前学习时整理的笔记和文档还有过往自己总结的博客之后发现一个问题,就是在有关flannel和calico这两个k8s网络插件的文章和博客中,会涉及到cni0和doc ...

  8. 使用EF 连接 数据库 SQLserver、MySql 实现 CodeFirst

    1.新建项目,下载Nuget安装包 创建项目需要注意几点,如果是基于 .net framework 的项目 需要选择 相应版本的 EF, 如果是跨平台则选择EF Core版本. 我这里选择的是 .ne ...

  9. Spark3学习【基于Java】5. Spark-Sql联表查询JOIN

    大数据场景下,联表远比微小型关系型数据库中使用的频繁.网上有句话: 传统数据库单机模式做Join的场景毕竟有限,也建议尽量减少使用Join. 然而大数据领域就完全不同,Join是标配,OLAP业务根本 ...

  10. h5使用js拉起微信支付

    近期,业务需求对接了微信支付,做个总结.web网页想要拉起微信支付,有两种方法: H5下单支付 , JSAPI支付 .首先纯前端做不了微信支付,必须配合后端才能通过微信的下单请求.接下来说说这两种方法 ...