HTML5绘图笔记5：绘制文字

最新推荐文章于 2022-12-18 15:50:09 发布

HaanLen

最新推荐文章于 2022-12-18 15:50:09 发布

阅读量360

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_40119412/article/details/104113442

版权

HTML5 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

绘制填充文字

绘制文字的方法

绘制文字时可以主要使用filltext()方法或strokeText()方法。fillText()方法用填充方式绘制文本，strokeText()方法用轮廓方式绘制文本，这两个方法的格式定义如下。

void fillText(text,x,y,[maxwidth]);
void strokeText(text,x,y,[maxwidth]);

绘制文字的属性

使用canvas API绘制文字，可以设置有关文字绘制的属性

例子

<canvas id="myCanvas" width="300" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// 创建渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变填色
ctx.fillStyle=gradient;
ctx.fillText("HTML5+CSS3",10,90);
</script>

在这里插入图片描述

绘制轮廓文字

例子

<canvas id="myCanvas" width="300" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.strokeText("Hello World!",10,50);
ctx.font="30px Verdana";
// 创建渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变填色
ctx.strokeStyle=gradient;
ctx.strokeText("HTML5+CSS3",10,90);
</script>

在这里插入图片描述

测量宽度

例子

<canvas id="myCanvas" width="300" height="100"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.font = "bold 20px 楷体";
ctx.fillStyle="Blue";
var txt1 = "从青丝一路到白发。";
ctx.fillText(txt1,10,40);
var txt2 = "以上字符串的宽度为：";
var mtxt1 = ctx.measureText(txt1);
var mtxt2 = ctx.measureText(txt2);
ctx.font = "bold 15px 宋体";
ctx.fillStyle="Red";
ctx.fillText(txt2,10,80);
ctx.fillText(mtxt1.width,mtxt2.width,80);
</script>