绘制字体时可以使用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. [ActionScript 3.0] AS3.0根据当天日期获取明天，后天...日期

    const dayTime:Number=24*3600*1000//一天毫秒数 var date:Date = new Date(); trace("今天:"+ date.toD ...

  2. crm plugin 未能加载文件或程序集“xxxx,”或它的某一个依赖项。系统找不到指定的文件。

    plugin运行出错. 1  plugin文件如果是 注册到disk,应该是注册到 C:\Program Files\Microsoft Dynamics CRM\Server\bin\assembl ...

  3. centos7 下安装oracle 11g笔记

    终于在vmare的centos7下将oracle11g安装成功了,不容易,将结果记录如下 启动oracle监听及服务的步骤,使用oracle用户登录,执行以下命令 登录到CentOS,切换到oracl ...

  4. uWSGI其三：uWSGI搭配Nginx使用

    http://www.nowamagic.net/academy/detail/1330334 上一篇介绍了 uWSGI 来部署 Django 程序,但在在生产环境中单单只有 uWSGI 是不够的,N ...

  5. VML/SVG在Web开发中一些常见的框架

    1.借鉴自: http://www.codefans.net/soft/3061.shtml 来源于网上. flowchart.js  http://adrai.github.io/flowchart ...

  6. 命令行重新安装.net framework

    ①运行cmd ②运行命令: cd c:\\windows\\microsoft.net\\framework\v4.0.30319 ③在上述目录下执行如下命令 aspnet_regiis.exe -i ...

  7. 单选按钮，通过js判断是否选中

    <input type="radio" value="0" style="vertical-align:middle" name=&q ...

  8. 剑指Offer:面试题11——数值的整数次方(java实现)

    题目描述: 实现函数double Power(double base, int exponent),求base的exponent次方,不得使用库函数,同时不需要考虑大数问题 思路:本题的重点考察内容是 ...

  9. WebApi简单使用

    一.建立一个WebApi项目 WebApi项目的文件和MVC的基本项目内容差不多,都有Models View Controller等,区别在于WebApi的控制器继承的不是Controller类,而是 ...

  10. VC与JavaScript交互(四) --- WebBrowser或CHtmlView中轻松屏蔽脚本错误(JavaScript)

    1.什么是javascript脚本错误 1.1    概述 JavaScript脚本错误包含“运行时错误”和“语法错误”. 1.2    JavaScript“语法错误” JavaScript语法错误 ...