canvas绘制文字

时间 2019-12-01

标签 canvas 绘制文字繁體版

原文原文链接

绘制字体时可使用fillText方法或者strokeText方法。canvas

fillText方法用填充的方式来绘制字符串函数

context.fillText (text, x,y,[maxwidth]);字体

strokeText方法用轮廓的方式来绘制字符串.编码

context.strokeText (text, x,y,[maxwidth]);spa

第一个参数text表示要绘制的文字，code

第二个参数x表示要绘制的文字的起点横坐标，视频

第三个参数y表示要绘制的文字的起点纵坐标，对象

第四个参数maxwidth 为可选参数，表示显示文字的时候最大的宽度，能够防止文字溢出blog

在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是默认值