绘制字体时可以使用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

  1.  <body onload="draw('canvas')">
  2.  <canvas id="canvas" width="800" height="300" ></canvas>
  3.  </body>

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

  1.  function draw(id){
  2.      var canvas = document.getElementById(id);
  3.      var context = canvas.getContext('2d');  //获取对应的2D对象(画笔)
  4.      context.fillStyle = 'green';  //设置填充的背景颜色
  5.      context.fillRect(0,0,800,300); //绘制 800*300 像素的已填充矩形：
  6.      context.fillStyle = '#fff';
  7.      context.strokeStyle = '#fff'; //设置笔触的颜色
  8.      context.font = "bold 40px '字体','字体','微软雅黑','宋体'"; //设置字体
  9.      context.textBaseline = 'hanging'; //在绘制文本时使用的当前文本基线
  10.      context.fillText('欢迎收看' ,10 ,40); //设置文本内容
  11.      context.fillText('《canvas轻松入门》',40,110);
  12.      context.fillText('视频教程',580,180);
  13.  }

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. 收缩sql server2008 数据库

    USE DATABASENAME; GO -- Truncate the log by changing the database recovery model to SIMPLE. ALTER DA ...

  2. Win8系统 Python安装 - 入门

    原文:http://www.blogbus.com/hx1987-logs/271955446.html 安装python (1)下载python安装包,下载网站https://www.python. ...

  3. TchApp项目说明

    概述 使用Web做UI,csharp编程,构建跨平台桌面软件,项目目标是打造一个框架,做完相关的基础设施,让使用者能够只关注业务开发,而不需要重新构建基础设施. 项目应该包括:窗口管理API,跨语言( ...

  4. 【翻译习作】 Windows Workflow Foundation程序开发-第一章01

    第 1 章    欢迎来到工作流的世界 …思想如蝴蝶般飞到我身边 —— Gossard / Vedder (译注:Gossard与Vedder是来自Pearl Jam乐队的2名乐手,该句出自他们的歌曲 ...

  5. 【LeetCode】5. Longest Palindromic Substring 最大回文子串

    题目: Given a string S, find the longest palindromic substring in S. You may assume that the maximum l ...

  6. EB（存储单位）

    abbr.艾字节,1EB=1024PB 计算机的存储单位 位 bit (比特)(Binary Digits):存放一位二进制数,即 0 或 1,最小的存储单位. 字节 byte:8个二进制位为一个字节 ...

  7. linux中强大且常用命令：find、grep

    在linux下面工作,有些命令能够大大提高效率.本文就向大家介绍find.grep命令,他哥俩可以算是必会的linux命令,我几乎每天都要用到他们. 本文结构如下: find命令 find命令的一般形 ...

  8. No.013 Roman to Integer

    13. Roman to Integer Total Accepted: 95998 Total Submissions: 234087 Difficulty: Easy Given a roman ...

  9. dev中如何对combox下拉框设置可消除属性以及ASPxGridView中金额，数量的显示，以及总计、grid中某行值

    下拉框属性关键:IncrementalFilteringMode="StartsWith" DropDownStyle="DropDown" ASPxGridV ...

  10. Nodejs笔记（一）

    Node近些日子大火,看样子js大有统一前端后台的趋势... Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度快,性 ...