一.绘制文本

font属性：可以设置字体的大小和字体名称。

fillText方法的作用：填充文字。

ctx.fillText("我是微软雅黑",100,100);

第一个参数：填充的文字内容。

第二个参数：代表x的值。

第三个参数：代表y的值。

所以，第二、三个参数的作用：设置文字的坐标位置(x,y)。

textAlign属性的作用：文字的对齐方式。

ctx.textAlign = "left";

属性值讲解：

left：文本左对齐。

right：文本右对齐。

center：文本居中对齐。

start(默认值):文本从指定位置开始。

end：文本才指定位置结束。

二.源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制文本</title><style>canvas{border: 1px solid black;}</style>
</head>
<body><canvas width="600" height="400" id="myCanvas"></canvas>
</body>
</html>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");//写文字ctx.font = "30px 微软雅黑";ctx.textAlign = "left";ctx.fillText("我是微软雅黑",100,100); // (100,100)是绘制文字的位置
</script>

三.效果图

篇章

上一篇：canvas教程9-线型的属性

下一篇：canvas教程11-渐变

canvas教程10-绘制文本相关推荐

html语言填充没有只有描边,HTML5 Canvas笔记——交互绘制文本（描边、填充、阴影、渐变填充、图案填充、文本的属性设置）...
(1)文本的描边.填充.阴影 (2)文本的渐变填充 (3)文本的图案填充 (4)文本的属性设置及效果呈现交互绘制文本.html 交互绘制文本 body { background: #eeeeee; ...
精通Android自定义View(八)绘制篇Canvas分析之绘制文本
1 简述绘制文字分为三种应用场景: 情况1:指定文本开始的位置即指定文本基线位置基线x默认在字符串左侧,基线y默认在字符串下方情况2:指定每个文字的位置情况3:指定路径,并根据路径绘制文字 ...
【canvas教程】绘制大图并实现画布拖动
效果展示: 实现代码: <template><view><canvasid="gameCanvas"canvas-id="gameCanva ...
canvas教程9-线型的属性
文章目录一.线型知识二.图案V的案例 1.源码 2.效果图三.虚线案例 1.源码 2.效果图篇章一.线型知识 lineWidth属性: 设置线的粗细,属性值必须是数字,默认是1且没有单位. ...
canvas教程大纲
文章目录 canvas教程1-canvas的基本使用 canvas教程2-canvas的编程思想 canvas教程3-用面向对象思维来实现动画 canvas教程4-canvas的绘制功能 canvas ...
canvas教程11-渐变
文章目录一.渐变 1.线型渐变 2.径向渐变二.源码 1.线型渐变 2.径向渐变三.效果图 1.线型渐变 2.径向渐变篇章一.渐变渐变有两种方式,一种是线型渐变,一种是径向渐变. 1.线型 ...
【canvas教程】实现画布拖动、定点缩放，支持手势与鼠标滚轮操作
效果展示: 实现原理: 1.求实现定点缩放所需的位移值定点缩放:从图中选取某点(参照物)为中心点进行缩放,缩放时无论图像怎么变化,该点位置始终固定不变. 有想深入了解实现原理的,不妨试着做一下我下面 ...
java绘图文本框_JavaMe开发：绘制文本框TextEdit
[问题描述]在JavaMe连载(3)-也说MVC设计模式一文中提到了一个TextEdit类,但没有给出具体实现,TextEdit是采用GameCanvas绘制的文本编辑器.本文结合实例给出实现的方法 ...
html像素绘制文字,HTML5 - Canvas的使用样例10（绘制文本）
1,设置绘图上下文的font属性 (1)设置字体大小(像素)和字体名称 context.font = "22px Arial"; (2)为了适应多个浏览器,字体名字可以多列几种 c ...

canvas教程10-绘制文本

文章目录

一.绘制文本

二.源码

三.效果图

篇章

canvas教程10-绘制文本相关推荐

最新文章

热门文章