首页 / HTML5 / HTML5CANVAS：绘制文字

HTML5CANVAS：绘制文字

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML5CANVAS：绘制文字，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6076字，纯文字阅读大概需要9分钟。

内容图文

　　我们可以在HTML5 canvas上绘制绘制文字，并且可以设置文字的字体，大小和颜色。

　　绘制文字的字体由2D上下文的font属性来控制。如果你需要使用颜色来填充文字或制作描边文字，可以使用2D上下文的fillStyle和strokeStyle属性来完成。

　　要在canvas上绘制文字，可以通过2D上下文的fillText()函数或strokeText()函数来完成。下面是一个简单的例子：

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.font = "normal 36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50, 50);
context.font = "normal 36px Arial";
context.strokeStyle = "#000000";
context.strokeText("HTML5 Canvas Text", 50, 90);

　　下面的图片是上面代码的返回结果：

　　字体和样式
　　当在HTML5 canvas上绘制文字的时候，我们可以设置文字的字体和样式。我们可以通过一组2D上下文的font属性来完成这些工作。这些属性和CSS中设置字体的属性是兼容的：

[font style][font weight][font size][font face]

　　举例来说，我们可以这样设置字体：

context.font = "normal normal 20px Verdana";

　　对于上面的这些属性，我们可以有下面的一些可取值：

　　　font style可取值有：
　　　　normal
　　　　italic
　　　　oblique
　　　　inherit

　　　font weight可取值有：
　　　　normal
　　　　bold
　　　　bolder
　　　　lighter
　　　　auto
　　　　inherit
　　　　100
　　　　200
　　　　300
　　　　400
　　　　500
　　　　600
　　　　700
　　　　800
　　　　900

　　　font size：字体的尺寸，单位像素。
　　　ont face：字体。例如：verdana, arial, serif, sans-serif, cursive, fantasy, monospace等

　　需要注意的是，不是所有的浏览器都支持所有这些属性的，实际使用中你需要根据实际情况做一些测试。

　　绘制文字
　　当在HTML5 canvas中绘制文字的时候，你可以绘制填充文字，也可以绘制描边文字。它们分别通过2D上下文的fillText()和strokeText()函数来实现。这两个函数的定义如下：

fillText (textString, x, y [,maxWidth]);
strokeText (textString, x, y [,maxWidth]);

　　textString是要绘制的文字。

　　x和y表示文字在canvas上的位置。x参数是文字的X轴坐标，y是文字Y轴坐标，但是它如何在Y轴上定位还要取决于文本的基线。文本的基线会在后面介绍。

　　maxWidth表示文字在水平方向上的最大宽度。详细内容接着往下看。

　　下面是一个示例代码：

context.font = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50, 50);

　　文本的最大宽度
　　可选参数maxWidth表示在canvas上绘制文字的时候，文字水平方向上最大的宽度不能大于参数指定的值。如果文本的宽度大于maxWidth指定的值，那么文字的宽度会被压缩。注意不是被剪裁掉。下面是一个例子，在canvas中绘制两串相同的文本，但是使用不同的maxWidth属性：

context.font = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50, 50);
context.fillText("HTML5 Canvas Text", 50, 100, 200);

　　上面的代码的返回结果如下，注意第二串文字被压缩为总宽度200像素：

　　文字的颜色
　　文字的填充或描边颜色是通过2D上下文的fillStyle和strokeStyle属性来完成的。实现方式和图形的方式相同。可以参考HTML5 Canvas：绘制矩形中的介绍，这里不再重复。

　　测量文本的宽度
　　在2D上下文中有一个函数可以用于测量文本的宽度，返回以像素为单位的结果值。这个函数不能测量高度。这个函数是measureText()。下面是一段示例代码：

var textMetrics = context.measureText("measure this");
var width = textMetrics.width;

　　通过测量文本的宽度，我们可以知道当前的这些文字是否能够放在当前的canvas容器中，或者其它一些用途。

　　文本的基线
　　文本的基线用于决定如何解释fillText()和strokeText()函数中的y参数。通俗来讲，就是文字在垂直方向上如何定位。注意，在不同的浏览器中，这些解释可能会稍微有一些不同。

　　可以通过2D上下文的textBaseline属性来设置文本的基线。

　　文本基线的语法为：

ctx.textBaseline=
"top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";

　　下表中列出了文本基线的可取值及其描述。
　　

取值	描述
top	文本以文本中最高的字符为基线进行对齐
hanging	文本的基线是悬停线（hanging baseline）。它和top取值基本相同，多数情况下你可能看不出有什么区别
middle	文本的基线是文字的中心线
alphabetic	文本的基线是正常的文字基线
ideographic	文本的基线是水平方向的字形底部
bottom	文本以文本中最低的字符为基线进行对齐

　　看了上面的描述大家会一头雾水。现在举例来说明。我们使用相同的y值(75)来绘制一串文本但是为每一个文字设置不同的基线值。在图片中我们绘制一条y=75的执行来表示所有文字的基线。

　　上面图片的实现代码如下：

context.stokeStyle = "#000000";
context.lineWidth = 1;
context.beginPath();
context.moveTo( 0, 75);
context.lineTo(500, 75);
context.stroke();
context.closePath();
context.font = "16px Verdana";
context.fillStyle = "#000000";
context.textBaseline = "top";
context.fillText("top", 0, 75);
context.textBaseline = "hanging";
context.fillText("hanging", 40, 75);
context.textBaseline = "middle";
context.fillText("middle", 120, 75);
context.textBaseline = "alphabetic";
context.fillText("alphabetic", 200, 75);
context.textBaseline = "ideographic";
context.fillText("ideographic", 300, 75);
context.textBaseline = "bottom";
context.fillText("bottom-glyph", 400, 75);

　　文本对齐
　　2D上下文的textAlignment属性用于定义文字在水平方向上如何对齐。换句话来说，就是textAlignment属性定义绘制文本时文本的x坐标属性。

　　textAlignment属性的语法为：

ctx.textAlign = "left" || "right" || "center" || "start" || "end";

　　下表中列出了textAlignment属性各个取值及其描述。
　

取值	描述
start	文本从x左边开始绘制
left	文本从x左边开始绘制，和start属性相同
center	x坐标位于文本的中心
end	x坐标位于文本的末尾
right	x坐标位于文本的末尾，和end属性相同

　　在下面的例子中显示了textAlignment属性的各种取值的定位。垂直直线的x坐标为x=250，所有的字的x属性值也是250，但是它们的textAlignment属性取值各不相同。

　　上面的图片的实现代码如下：

context.stokeStyle = "#000000";
context.lineWidth = 1;
context.beginPath();
context.moveTo( 250, 0);
context.lineTo( 250, 250);
context.stroke();
context.closePath();
context.font = "16px Verdana";
context.fillStyle = "#000000";
context.textAlign = "center";
context.fillText("center", 250, 20);
context.textAlign = "start";
context.fillText("start", 250, 40);
context.textAlign = "end";
context.fillText("end", 250, 60);
context.textAlign = "left";
context.fillText("left", 250, 80);
context.textAlign = "right";
context.fillText("right", 250, 100);

　　本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/ ... g/201507172250.html

内容总结

以上是互联网集市为您收集整理的HTML5CANVAS：绘制文字全部内容，希望文章能够帮你解决HTML5CANVAS：绘制文字所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/389852.html

来源：【匿名】

【上一篇】HTML5SVG带圆形进度条动画的提交按钮特效【下一篇】html5如何获取php数据

更多 ►

【HTML5CANVAS：绘制文字】教程文章相关的互联网学习教程文章

html5 canvas 填充渐变形状【代码】【图】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>填充渐变形状</title><script src="js/modernizr.js"></script></head><body><script type="text/javascript"> window.addEventListener(‘load‘,eventWindowLoaded,...

HTML5中的canvas基本概念及绘图

* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的图形与HTML页面无关 * 无法通过DOM获取绘制的图形 * 无法为绘制的图形绑定DOM事件 * 只能使用Canvas提供的API * Canvas用途 * 在HTML页面中绘制图表(例如柱状图、饼状图等) * 网页游戏 - Flash技术 * 使用HTML5中的Canvas ...

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf4【图】

CanvasRenderingContext2D对象中用于平移、旋转坐标系的方法镜像scale(1,-1)绘制垂直镜像；scale(-1,1)绘制水平镜像自定义的坐标变换 transform()，多次调用会叠加效果setTransform()，每次调用都会清除上次的效果两个方法都用于旋转、缩放、及平移坐标系（可以根据公式传入0或其他数据）x‘=ax+cy+ey‘=bx+dy+f坐标系旋转公式(angle弧度)x‘=x×cos(angle)-(y×sin(angle))y‘=y×cos(angle)+(x×sin(angle))平移x‘=x+dxy‘=y+dy缩放...

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf7【图】

性能运行putImageData()比drawImage()慢，同等条件下优先考虑drawImage()操作图像数据需要遍历大量数据，应该注意几点：1）避免在循环体中直接访问对象属性，应当保存在局部变量中2）应该用循环计数器遍历完整的像素，而非像素分量（每4个一组）3）逆向遍历与移位技巧效果并不好4）不要频繁使用getImagedata()视频处理var video=document.getElementById(‘video‘);　　//A <video>element　　...context.drawImage(video,0,0);　...

html5 canvas 实现倒计时功能【代码】【图】

function showTime(a) {var b = {id: "showtime", //canvasidx: 60, //中心点坐标 X轴;y: 60, //中心点坐标 Y轴;radius: 60, //圆的半径angle: 0, //角度无需设置linewidth: 6, //线的宽度backround: "#d65554", //倒计时背景色color: "#e4e4e4", //填充色day: 0,time: 0,minute: 0,seconds: 0}if (a) {b = $.extend(b, a);}this.total = 0;this.id = b.id;this.x = b.x;this.y = b.y;this.radius = b.radius;this.angle = b.angl...

HTML5 - canvas标签【代码】

canvas标签<!doctype html><htmllang="zh-CN"><head><metacharset="utf-8" /><title>canvas标签</title><head><body><canvasid="canvas"width="500"height="800"style="background:#ccc;">您的浏览器不支持canvas标签，请升级浏览器！</canvas><script>//获取画布对象var canvas=document.getElementById("canvas");//alert(canvas);//获取用于绘画的...

HTML5—canvas绘制图形（1）【代码】【图】

1、canvas基础知识 canvas元素是HTML5中新增的一个重要的元素，专门用来绘制图形，不过canvas本身不具备画图的能力，在页面中放置了canvas元素，就相当于在页面中放置了一块矩形的“画布”，我们可以利用js脚本在“画布”上绘制图形。 1.1canvas元素在利用canvas绘制图形之前，我们首先需要在页面中放置一个canvas元素，如下代码：<canvas id="mycanvas" width="400" height="400">您的浏览器out了</canvas> 说明：（1）放置canva...

基于HTML5的Canvas技术实现前端的图片压缩【代码】

Canvas应用：图片压缩算法实现前端图片压缩应用场景前端页面限制用户只可以上传5MB大小的图片前端在接受到用户上传的图片之后，服务器只允许上传1MB大小的图片，此时需要前端将图片先进行压缩，压缩之后再调用图片上传接口将图片上传第一步：创建input元素，监听input表单域的change事件创建一个input元素，并且设置HTML5新增的type为file监听input元素的change事件，并通过e.target.files拿到用户上传的文件列表数组获取用户上传的...

html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法【图】

继续讲canvas中画曲线的方法，今天讲quadraticCurveTo。说实话这个方法有点吓人，单从函数名称上都可以初体验。话说，我觉得有必要把这个函数名缩短。 quadratic的意思是二次，即数学中二次元方程那个二次。而ctx.quadraticCurveTo的参数如下：复制代码代码如下:ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标，而x1,y1是曲线控制点的坐标？什么？你问我起点在哪里？起点在此之前用moveTo确定。我之所以把控制点的坐标带...

HTML5 Canvas锯齿图代码实例

效果图：提示：把代码复制到一个html文件中并保存，直接打开即可看到效果。实现代码：复制代码代码如下:<!doctype html><html lang="zh"><head><meta charset="gbk"><title>锯齿图</title><script type="text/javascript">window.addEventListener("load", eventWindowLoaded, false);function eventWindowLoaded(){var x,y;var theCanvas = document.getElementById("canvas");var context = theCanvas.getContext("2d");//Boxcon...

实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码

这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个HTML5 Canvas动画有一点比较出色，就是其性能，Chrome上基本没有卡的感觉，就算你放出很多烟花也一样。　　下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。　　HTML代...

Canvas HTML5【代码】【图】

Canvas Examples一个canvas是在html页面上规则的区域。默认的，一个canvas没有边框和内容<canvas id="myCanvas" width="200" height="100"></canvas>基本步骤<script>var canvas = document.getElementById("myCanvas");//发现canvas元素var ctx = canvas.getContext("2d");//创建一个drawing对象 //在画布上画画ctx.fillStyle ="#FF0000"; ctx.fillRect(0,0,150,75); </script>HTML Canvas CoordinatesCanvas CoordinatesThe HTML...

HTML5-canvas【代码】

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7<title>Document</title> 8</head> 9<body>10<canvas id="myCanvas" width="300" height="300" style="border:1px solid black"></canvas>11<img id="scream" src="https://www.runoob.com/try/demo_source/img_the_screa...

html5 之 canvas 相关知识(一)概念及定义【代码】

什么是 Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。<canvas> 标签只是图形容器，它没有自己的行为，需要定义API 支持脚本化客户端绘图操作。创建 Canvas 元素canvas的代码很简单，定义一个ID以及宽和高。这里强调一点：canvas的宽高必须写在元素上，如果用样式定义，不能改变其图片的比例<canvas i...

使用HTML5 Canvas创建动态粒子网格动画【代码】【图】

最近看到一个粒子网格动画挺炫的，自己也就做了一个，当背景挺不错的。CSDN不能上传超过2M的图片，所以就简单截了一个静态图片：可以点击这里查看动画.下面就开始说怎么实现这个效果吧：首先当然是添加一个canvas了：<canvasid="canvas"></canvas>下面是样式：<style>#canvas{position: absolute;display: block;left:0;top:0;background:#0f0f0f;z-index: -1;}</style>上面canvas的z-index: -1的作用是可以放在一些元素的下面当...

首页 / HTML5 / HTML5CANVAS：绘制文字

HTML5CANVAS：绘制文字

内容导读

内容图文

内容总结

内容备注

内容手机端

【HTML5CANVAS：绘制文字】教程文章相关的互联网学习教程文章

HTML5CANVAS - 相关标签

HTML5 - 技术教程分类

HTML5 - 最新教程

HTML5 - 最热教程