绘制字体时可以使用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. 认识与学习BASH(中)

    1.在设置变量中:单引号与双引号的最大不同:双引号能保有变量的内容,单引号仅能是一般字符 2.反单引号(`)作用:在一串指令中,在‘之内的指令将会被先执行,其结果将作为外部的输入信息. locate指 ...

  2. java io InputStream 转 byte

    InputStream is ; ByteArrayOutputStream baos = new ByteArrayOutputStream(); byte[] b = new byte[1024] ...

  3. 软件开发过程文档-cgaowei

    鸡肋——食之无味,弃之可惜”,软件开发过程文档遭遇了鸡肋一样的境遇. 目前敏捷软件开发过程非常流行.相对于软件开发过程文档,敏捷软件开发过程更加重视可运行的程序.关于软件开发过程文档,两个极端都是不可 ...

  4. JavaScript对象的创建之动态原型方式

    为了让定义的方式更加符合java的需求,就把定义方法的原型代码放置在Person这个构造函数中. function Person(name,age,friends){ //属性在构造函数中定义 thi ...

  5. cocos2d-lua 3.5 android搭建步骤

    cocos2d-lua 3.5 android搭建步骤 如何安装eclipse,jdk,android sdk,ndk这里都不说了,资料很多,而且以前用eclipse搭建cocos2d-x-c++的时 ...

  6. Facebook等使用苹果源生分享

         1.Facebook官方的SDK分享               2.ShareSDK,第三方集成的分享方式      3.网页分享方式分享      4.IOS6之后,苹果自己集成了对于F ...

  7. MSP430F149学习之路——SPI

    代码一: //****************************************************************************** //Description: ...

  8. Oracle 自定义函数Function

    示例代码: CREATE OR REPLACE  FUNCTION "MY_DATABASE"."F_GET_USER_COUNT_BY_DEPART" ( D ...

  9. 洛谷P2085 最小函数值(minval)

    P2085 最小函数值(minval) 218通过 487提交 题目提供者该用户不存在 标签堆高级数据结构 难度普及+/提高 提交该题 讨论 题解 记录 最新讨论 暂时没有讨论 题目描述 有n个函数, ...

  10. gerrit 调试smtp email