canvas绘制文字

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

 

posted @ 2016-12-15 16:04  杜Amy  阅读(17516)  评论(0)  编辑  收藏  举报