绘制字体时可以使用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. 通过批处理(bat)命令创建mysql数据库及用户等

    1.建立数据库文件:mysqlCreatDB.sql create database Mydb 2.为用户赋予权限文件:grantUser.sql grant select,insert,update ...

  2. Flask + Gunicorn + Nginx 部署

    最近很多朋友都在问我关于 Flask 部署的问题,说实在的我很乐意看到和回答这样的问题,至少证明了越来越多人开始用 Flask 了. 之前我曾发表过一篇在 Ubuntu 上用 uwsgi + ngin ...

  3. that-annoying-insert-problem-getting-data-into-the-db-using-dapper

    http://samsaffron.com/archive/2012/01/16/that-annoying-insert-problem-getting-data-into-the-db-using ...

  4. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

  5. flexgrid的应用

    第一.导入必须的CSS与JS: <link rel="stylesheet" type="text/css" href="css/flexigr ...

  6. C# Windows Forms 事件处理顺序

    事件引发的顺序对某些Windows 窗体应用来说十分重要.当某些事件需要特别处理时(如重绘窗体的某些部分),必须知道事件在运行时的确切引发顺序.下面就应用程序和控件的生命周期中的几个重要阶段的事件顺序 ...

  7. Photoshop Cs5 64位系统破解版下载（内含破解方法）

    Photoshop Cs5 64位系统是电影.视频和多媒体领域的专业人士, 使用 3D 和动画的图形和 Web 设计人员, 以及工程和科学领域的专业人士的理想选择,下面提供Photoshop Cs5  ...

  8. 凸包（Convex Hull）构造算法——Graham扫描法

    凸包(Convex Hull) 在图形学中,凸包是一个非常重要的概念.简明的说,在平面中给出N个点,找出一个由其中某些点作为顶点组成的凸多边形,恰好能围住所有的N个点. 这十分像是在一块木板上钉了N个 ...

  9. MXNet官网案例分析--Train MLP on MNIST

    本文是MXNet的官网案例: Train MLP on MNIST. MXNet所有的模块如下图所示: 第一步: 准备数据 从下面程序可以看出,MXNet里面的数据是一个4维NDArray. impo ...

  10. Android开发-API指南-设备兼容性

    Device Compatibility 英文原文:http://developer.android.com/guide/practices/compatibility.html 采集日期:2014- ...