html像素绘制文字,HTML5 - Canvas的使用样例10（绘制文本）

1，设置绘图上下文的font属性

(1)设置字体大小(像素)和字体名称

context.font = "22px Arial";

(2)为了适应多个浏览器，字体名字可以多列几种

context.font = "22px Arial,sans-serif";

(3)可以为字体增加加粗效果

context.font = "bold 22px Arial";

2，使用fillText()方法绘制文本内容

文本每次只能绘制一行，如果要绘制多行文本，那只能多次调用fillText()方法。

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.font = "bold 22px Arial";

context.textBaseline = "top";

context.fillStyle = "black";

context.fillText("Welcome to hangge.com", 10, 10);

3，使用strokeText()绘制文本轮廓(空心文本)

其中轮廓的颜色取自 strokeStyle属性，轮廓的宽度取自 lineWidth属性。

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.font = "bold 25px Arial";

context.textBaseline = "top";

context.lineWidth = "1";

context.strokeStyle = "orange";

context.strokeText("Welcome to hangge.com", 10, 10);

4，绘制彩色描边文本

可以先调用 fillText() 绘制实心文本，然后调用 strokeText() 绘制文本的轮廓。

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.font = "bold 25px Arial";

context.textBaseline = "top";

context.fillStyle = "black";

context.fillText("Welcome to hangge.com", 10, 10);

context.lineWidth = "1";

context.strokeStyle = "orange";

context.strokeText("Welcome to hangge.com", 10, 10);

html像素绘制文字,HTML5 - Canvas的使用样例10（绘制文本）相关推荐

html小球跳跃技术原理,HTML5 - Canvas的使用样例15（动画的实现，以弹跳小球为例）...
1,Canvas实现动画的原理 (1)首先设置一个定时器,反复调用绘图函数(一般每秒30~40次).每次调用,都会重绘整个画布.完成后的效果就像动画一样,每一帧间过渡会平滑而流畅. (2)有两种方法都 ...
html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
html坐标绘制路径,HTML5 CANVAS：绘制路径
一条HTML5 canvas路径是通过绘制指令来连接一系列的点,由这一系列的点构成直线或曲线.路径可以用于在HTML5 canvas上绘制各种类型的图形:直线.圆形.多边形等等.路径的绘制是canva ...
html飞机翼布局,2.11 融会贯通：绘制喷气式飞机 - HTML5 Canvas 实战
本节,我们将使用直线.曲线.图形.颜色.线性渐变.径向渐变,绘制一个矢量式的喷气式飞机,来把HTML5的画布API推到极限. 图2-12 绘制喷气式飞机绘制步骤按照以下步骤,绘制一个矢量式的喷气式 ...
html 直线变曲线,2.4 玩转贝塞尔曲线：绘制云朵 - HTML5 Canvas 实战
本节,我们将通过连接一系列贝塞尔曲线的子路径绘制一朵蓬松的云,来学习如何绘制自定义图形. 图2-4 绘制云朵绘制步骤按照以下步骤,在画布的中央绘制一朵蓬松的云: 1. 定义2D画布上下文: win ...
html5绘制菱形,HTML5 canvas 菱形动画齿轮 - 开源中国
原创. 通过 HTML5 canvas 创造由18个菱形构成的齿轮,并产生动画效果. An animation is made of the wheel consisting 18 diamends. ...
html5绘制草,html5 canvas海底水草动画
html5 canvas海底水草动画代码片段: Stem.prototype.draw = function(ctx) { var len, ctrlPoint, point; len = this ...
html源码画螺旋,1.6 绘制螺旋线 - HTML5 Canvas 实战
注意,本节可能会使你昏昏欲睡.本节,通过连接一系列短线,我们将绘制一条螺旋线路径. 图1-10 绘制螺旋线绘制步骤按照以下步骤绘制一条有圆心的螺旋线: 1. 定义2D画布并初始化螺旋参数: win ...
html5制作圆弧,1.2 绘制圆弧 - HTML5 Canvas 实战
使用HTML5画布时,有时候需要绘制完美的圆弧.如果你对绘制彩虹.笑脸.图表等感兴趣,本节将是你努力的起点. 图1-3 绘制圆弧绘制步骤按照以下步骤绘制一条圆弧: 1. 定义2D画布并设置圆弧样式 ...

html像素绘制文字,HTML5 - Canvas的使用样例10（绘制文本）

html像素绘制文字,HTML5 - Canvas的使用样例10（绘制文本）相关推荐

最新文章

热门文章