绘制字体时可以使用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. 服务器返回数组，data[0]得到的总是不对？如何处理？

    我用asp.net MVC 写了服务器代码,返回数组,ajax怎么处理返回的数组内容? 您好,首先用eval将获得的ajax数据转化成json对象并赋值给一个变量. 比如: var obj=eval( ...

  2. eclipse项目！*图标含义

    一 .项目前面有红色!,表示工程中classpath中指向的包路径错误 解决办法: 右键项目名称 BuildPath ---> Configure Build Paht...中,然后上面有几个选 ...

  3. HDU 3068 [最长回文子串]

    #include<iostream> #include<string> #include<string.h> #include<algorithm> # ...

  4. 100. Same Tree(Tree)

    /** * Definition for a binary tree node. * public class TreeNode { * int val; * TreeNode left; * Tre ...

  5. 动画的特效Interpolator

    AccelerateDecelerateInterpolator 在动画开始与结束的地方速率改变比较慢,在中间的时候加速 AccelerateInterpolator  在动画开始的地方速率改变比较慢 ...

  6. SparkSQL External Datasource简易使用之CSV

    下载源码&编译: git clone https://github.com/databricks/spark-csv.git sbt/sbt assembly Maven GAV: group ...

  7. linux tar 命令 --致力于“一眼看懂，随手就用”的随笔

    基本玩法: 压缩: tar -czf txt.tar.gz *.txt // 将当前目录下的所有txt文件,创建一个tar包,并用gzip算法,压缩成txt.tar.gz 文件 解压: tar -xz ...

  8. AngularJs $http.post 数据后台获取不到数据问题 的解决过程

    第一次使用 AngularJs 的 $http 模块的时候,遇到过后台获取不到前台提交数据的问题,检查代码没有发现问题,先上代码. js 代码 angular.module("newsApp ...

  9. canvas-a10isPointPath2.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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