文字绘制；

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>text</title>
  7. </head>
  8.  
  9. <body>
  10.     <canvas id='myCanvas' width='800' height='400'>
  11.         your browser does not support canvas
  12.     </canvas>
  13.     <script type="text/javascript">
  14.     var c = document.getElementById('myCanvas');
  15.     var cxt = c.getContext('2d');
  16.     cxt.beginPath();
  17.     cxt.font = '30px Arial';
  18.     var txt = 'Hello World';
  19.     cxt.fillText(txt, 100, 50);
  20.     cxt.strokeStyle = 'red';
  21.     cxt.moveTo(100, 50); // 字体坐标是左下角坐标
  22.     cxt.lineTo(300, 50);
  23.     cxt.moveTo(100, 20); // 字体30px不是30像素
  24.     cxt.lineTo(300, 20);
  25.     cxt.font = '30pt Arial';
  26.     cxt.strokeText(txt, 280, 50); // 字体30pt是30像素
  27.  
  28.     cxt.fillText(txt, 100, 100, 50); // 整个文本宽度50px
  29.     cxt.moveTo(100, 100);
  30.     cxt.lineTo(150, 100); // 文本宽度是50像素
  31.     cxt.stroke();
  32.  
  33.     // 文本对齐的方式
  34.     cxt.moveTo(100, 150);
  35.     cxt.lineTo(200, 150);
  36.     cxt.moveTo(100, 130);
  37.     cxt.lineTo(200, 130);
  38.     cxt.moveTo(100, 170);
  39.     cxt.lineTo(200, 170);
  40.     cxt.moveTo(150, 120);
  41.     cxt.lineTo(150, 180);
  42.     cxt.stroke();
  43.     cxt.font = '40pt Arial'; // '40pt Courier New'的字体高度与Arial不一样
  44.     cxt.textAlign = 'center'; //center,end,left,right,start
  45.     cxt.textBaseline = 'middle'; //alphabetic,bottom,hanging,ideographic,middle,top
  46.     cxt.fillText('A', 150, 150);
  47.     </script>
  48. </body>
  49.  
  50. </html>

Canvas文本绘制的更多相关文章

  1. Javascript高级编程学习笔记（88）—— Canvas(5)绘制文本

    绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...

  2. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  3. canvas文本自动换行

    在用canvas中写刮奖结果的时候发现canvas中的文本不会自动折行,要进行截断另起一行来写.在此参考文章html5-canvas的绘制文本自动换行来做改写. 根据canvas宽度来做折行 在此根据 ...

  4. Canvas上绘制几何图形

    重要的类自定义View组件要重写View组件的onDraw(Canvase)方法,接下来是在该 Canvas上绘制大量的几何图形,点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形,等各种形状 ...

  5. Canvas文本操作

    Canvas的画图环境提供三个方法如:绘制填充文本:fillText();绘制描边文本:strokeText();绘制文本并返回一个对象:measure();measure()方法返回的对象中包括一个 ...

  6. 安卓自己定义View进阶-Canvas之绘制基本形状

    Canvas之绘制基本形状 作者微博: @GcsSloop [本系列相关文章] 在上一篇自己定义View分类与流程中我们了解自己定义View相关的基本知识,只是,这些东西依然还是理论,并不能拿来(zh ...

  7. 浅谈JavaScript的Canvas（绘制图形）

    HTML5中新增加的一个元素canvas,要使用canvas元素,浏览器必须支持html5.通过canvas标签来创建元素,并需要为canvas指定宽度和高度,也就是绘图区域的大小. <canv ...

  8. Canvas文本设置

    本文的应用对Canvas文本设置相关属性进行了汇总,具体使用说明请参考下面代码: <!DOCTYPE html> <html lang="zh"> < ...

  9. 小程序canvas文本换行生成图片

    一.图片透明及旋转 let ctx = wx.createCanvasContext('shareImg') ctx.drawImage('../../../' + res[0].path, 0, 0 ...

随机推荐

  1. python之路： 线程、进程和协程

    进程和线程 既然看到这一章,那么你肯定知道现在的系统都是支持“多任务”的操作,比如: Mac OS X,UNIX,Linux,Windows等. 多任务:简单地说就是同时运行多个任务.譬如:你可以一边 ...

  2. iOS多页面传值方式之单例传值singleton

    // 要实现单例传值,那就必须得新建一个类做为单例 提供创建该类对象的类方法(因为是要在alloc开辟内存空间后赋值).所有在.h文件中声明该方法 + (instancetype)defaultUII ...

  3. 搭建firefly服务端遇到的问题

    1 pylinter pylinter could not automatically determined the path to "lint.py" 这个错误通过安装pylin ...

  4. IIS发布WebService的一些常见问题

    安装IIS过程,在控制面板程序à程序功能à打开或关闭windows功能. 将Internet信息服务中的选项全部选中,点击确定. 验证IIS是否正确安装,等待几分钟后IIS配置完成在浏览器输入http ...

  5. VC#2010 视图设计器无法打开 问题的正解

    继上次VC#2010中视图设计器无法打开的问题的讨论后,我感觉每次都重新安装一次安装包未免也太麻烦了,程序员的时间都灰常宝贵. 所以在这次人工智能作业的时候,找到了一个简单的途径: 打开VC#2010 ...

  6. 控制流之for

    for..in是另外一个循环语句,它在一序列的对象上 递归 即逐一使用队列中的每个项目.我们会在后面的章节中更加详细地学习序列.使用for语句~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  7. [Colony]RHCS集群理论

    什么是集群?     集群是一组(>2)相互独立的,通过高速网络互联的计算机组成的集合.群集一般可以分为科学集群,负载均衡集群,高可用性集群三大类.     科学集群是并行计算的基础.它对外就好 ...

  8. Express 简介

    Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...

  9. Laravel 数据插入

    Laravel 的数据库操作基于 Eloquent ORM,在插入数据时有以下几种方式,返回结果也不会不同: 1.insert 插入后会返回 true or false: 2.create 插入成功后 ...

  10. iOS平台软件开发工具(一)-新建的工程使用CocoaPods工具集成第三方框架

    CocoaPods是一款集合了上千个第三方开源库的开发工具,能够大幅度的提升团队项目的开发效率,降低时间成本. 那么就看一下CocoaPods这个工具在项目中的使用体现吧. 我们马上用ASIHTTPR ...