绘制字体时可以使用fillText方法或者strokeText方法。

fillText方法用填充的方式来绘制字符串

context.fillText (text, x,y,[maxwidth]);

strokeText方法用轮廓的方式来绘制字符串.

context.strokeText (text, x,y,[maxwidth]);

第一个参数text表示要绘制的文字，

第二个参数x表示要绘制的文字的起点横坐标，

第三个参数y表示要绘制的文字的起点纵坐标，

第四个参数maxwidth 为可选参数，表示显示文字的时候最大的宽度，可以防止文字溢出

在body的属性里面，使用onload="draw('canvas' )“语句，调用脚本文件中的draw函数进行图形绘画

画布的创建方法：指定 id ， width（画布宽度）， height（画布高度）

创建一个画布，长度为800，高度为300

 <body onload="draw('canvas')">

 <canvas id="canvas" width="800" height="300" ></canvas>

 </body>

引入一个名为canvas的is脚本，js脚本的语言编码是utf-8

 function draw(id){

     var canvas = document.getElementById(id);

     var context = canvas.getContext('2d');  //获取对应的2D对象(画笔)

     context.fillStyle = 'green';  //设置填充的背景颜色

     context.fillRect(0,0,800,300); //绘制 800*300 像素的已填充矩形：

     context.fillStyle = '#fff';

     context.strokeStyle = '#fff'; //设置笔触的颜色

     context.font = "bold 40px '字体','字体','微软雅黑','宋体'"; //设置字体

     context.textBaseline = 'hanging'; //在绘制文本时使用的当前文本基线

     context.fillText('欢迎收看' ,10 ,40); //设置文本内容

     context.fillText('《canvas轻松入门》',40,110);

     context.fillText('视频教程',580,180);

 }

context.textBaseline = 'hanging';

属性值可以是top（顶部对齐）

hanging（悬挂） middle（中间对齐） bottom（底部对齐） alphabetic是默认值

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入门（3）:图像处理和绘制文字

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

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

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

  6. canvas绘制简单图形

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

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

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

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

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

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

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

随机推荐

  1. NYOJ 123 士兵杀敌4-树状数组的插线求点

    士兵杀敌(四) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5 描述 南将军麾下有百万精兵,现已知共有M个士兵,编号为1~M,每次有任务的时候,总会有一批编号连在一起人请战(编 ...

  2. Android--输入自动提示AutoCompleteTextView

    布局文件: <TextView android:id="@+id/title" android:layout_width="wrap_content" a ...

  3. Chapter Configuration

    Chapter Configuration 在Web.config 或App.config的configuration节,插入如下配置: <configuration> …… <co ...

  4. [转]用man查看命令帮助时, 括号中的数字表示的意思

    当提及如'rn(1)', 'ctime(3)'时,它们看上去像某种函数调用,但不是. 这些数字表示可在"Unix manual"中的哪一部分找到对应的文档. 数字对应的文档如下: ...

  5. python学习笔记（sqlalchemy安装失败）

    博主今天折腾了一天sqlalchemy安装问题 下面是失败的截图 直接重新安装python2.7仍未解决此问题 最终在一国外论坛中找到解决的方法: 安装VC++对python的支持文件 VCForPy ...

  6. cocos2d-x 3.x丨搭建Android环境下的开发环境

    所需要的一些工具软件: 1.JDK  官网下载地址:http://www.oracle.com/ttechnetwork/java/javase/downloads/index.html 2.Andr ...

  7. 在UltraEdit的查找和替换中使用正则表达式 (转)

    很多朋友都用过或者正在用UltraEdit,这个编辑器陪伴我也好几年了,从很多地方影响着我写代码的快捷键习惯,Ultraedit提供了非常丰富的编辑功能,其中非常重要的查找和替换功能一定大家都用过,U ...

  8. 使用AS3.0代码实现给图片添加滤镜的模糊与斜角效果

    滤镜可应用于任何显示对象(即,从 DisplayObject 类继承的对象), 例如 MovieClip.SimpleButton.TextField 和 Video 对象,以及 BitmapData ...

  9. 在 C# 控制台中记录异常日志并输出

    最近做了一个小程序,要求在控制台中记录程序运行的异常并输出到指定的文件夹中,以下是我的具体的程序代码: public static void ErrorLog(Exception ex) { stri ...

  10. 关于 mysql 2003 客户端连接报错的处理方法

    在连接到 mysql 数据库服务器时,有时会在客户端报出 2003 的错误代码,并提示: 无法连接到服务器,但服务器却可以 ping 通,可能的原因如下: 1.网络不通.检查能不能ping通. 2.防 ...