文字绘制；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>text</title>

</head>

<body>

    <canvas id='myCanvas' width='800' height='400'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    var c = document.getElementById('myCanvas');

    var cxt = c.getContext('2d');

    cxt.beginPath();

    cxt.font = '30px Arial';

    var txt = 'Hello World';

    cxt.fillText(txt, 100, 50);

    cxt.strokeStyle = 'red';

    cxt.moveTo(100, 50); // 字体坐标是左下角坐标

    cxt.lineTo(300, 50);

    cxt.moveTo(100, 20); // 字体30px不是30像素

    cxt.lineTo(300, 20);

    cxt.font = '30pt Arial';

    cxt.strokeText(txt, 280, 50); // 字体30pt是30像素

    cxt.fillText(txt, 100, 100, 50); // 整个文本宽度50px

    cxt.moveTo(100, 100);

    cxt.lineTo(150, 100); // 文本宽度是50像素

    cxt.stroke();

    // 文本对齐的方式

    cxt.moveTo(100, 150);

    cxt.lineTo(200, 150);

    cxt.moveTo(100, 130);

    cxt.lineTo(200, 130);

    cxt.moveTo(100, 170);

    cxt.lineTo(200, 170);

    cxt.moveTo(150, 120);

    cxt.lineTo(150, 180);

    cxt.stroke();

    cxt.font = '40pt Arial'; // '40pt Courier New'的字体高度与Arial不一样

    cxt.textAlign = 'center'; //center,end,left,right,start

    cxt.textBaseline = 'middle'; //alphabetic,bottom,hanging,ideographic,middle,top

    cxt.fillText('A', 150, 150);

    </script>

</body>

</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. Task 编程中的异常处理

    在 .Net 开发中, 使用 Task . Task<T> 进行异步编程是非常方便的, 但是在处理 Task 产生的异常时, 需要注意一个问题, 比如下面的代码: ? 1 2 3 4 5 ...

  2. PHP学习笔记--1，不总结，不掌握，不明白！

    不总结,不掌握,不明白! 前言: 学php一开始就是语法,变量,数组,函数,OOP(面向对象[封装,继承,多态,抽象]) 这些都是最基础的东西,但你还要懂一些在实际开发中要用的东西,比如基本的HTML ...

  3. Initialization of bean failed; nested exception is java.lang.reflect.MalformedParameterizedTypeExcep

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  4. Cocos2dx 学习笔记整理----在项目中使用图片（三）

    这节练习下DragonBones. 手机由于性能所限,需要特注意资源的使用. 游戏项目的话由于资源比较多,一般都会用到DragonBones来做动作,这个又称为龙骨. DragonBones传送点:h ...

  5. 如何在我自己的web 项目的jsp页面中添加链接，直接让别人通过内网在我的电脑上下载文件

    今天接到一个任务,将昨天年会的视频,音频,图片等放在公司自己的服务器上,使连接同一个路由器的(即同一个内网)的同事可以通过内网下载视频(通过内网下载,可以提高下载速度). 备注:本次用的是tomcat ...

  6. Selenium2+Python：Webdriver API速记手册

    由于web自动化常常需要控制浏览器行为和操作页面元素,相关函数又比较多,于是再此记下一份Webdriver API查阅文档以备不时之需. 参考:虫师<Selenium2自动化测试实战>,和 ...

  7. 【View层】界面绘制

    [引用]:http://www.jianshu.com/p/c5fc8c6b967a [View层]IOS纯代码绘制界面(一) 字数2303 阅读385 评论2 喜欢16 IOS开发中界面绘制占据了绝 ...

  8. Struts2接受参数的几种类型和接受复杂类型参数（list<String>和list<Object>）

    Struts2接受参数的几种类型 大概有这几种类型: 1.使用Action的属性接受参数 在Action中加入成员变量,配置Getter和Setter方法,Getter而和Setter方法的名字和表单 ...

  9. TF-IDF算法 笔记

    TF-IDF:Term Frequency-Inverse Document Frequency(词频-逆文档频度):主要用来估计一个词在一个文档中的重要程度. 符号说明: 文档集:D={d1,d2, ...

  10. mysql ++中文乱码问题

    使用mysql++读取mysql数据库,数据表中字符集为utf8,但是读取的时候中文字符串不能够正常显示.下面是测试程序: #include <iostream> #include < ...