canvas绘制文本文本的

在canvas中绘制文本

canvas 提供了两种方法来渲染文本:
fillText(text, x, y)
在指定的(x,y)位置填充指定的文本

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}html,body{height: 100%;overflow: hidden;}body{background: pink;}#test{background: gray;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}</style></head><body><canvas id="test" width="300" height="300"><span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span></canvas></body><script type="text/javascript">window.onload=function(){var canvas = document.querySelector("#test");if(canvas.getContext){var ctx = canvas.getContext("2d");ctx.fillStyle="green"ctx.font="40px sans-serif"ctx.fillText("邱海峰",100,100);}}</script>
</html>

strokeText(text, x, y)
在指定的(x,y)位置绘制文本边框

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}html,body{height: 100%;overflow: hidden;}body{background: pink;}#test{background: gray;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}</style></head><body><canvas id="test" width="300" height="300"><span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span></canvas></body><script type="text/javascript">window.onload=function(){var canvas = document.querySelector("#test");if(canvas.getContext){var ctx = canvas.getContext("2d");ctx.strokeStyle="green"ctx.font="40px sans-serif"ctx.strokeText("邱海峰",100,100);}}</script>
</html>

文本样式

font = value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法.
默认的字体是 10px sans-serif。
font属性在指定时，必须要有大小和字体缺一不可

textAlign = value文本对齐选项. 可选的值包括： left, right  center. left文本左对齐。right文本右对齐。center文本居中对齐。这里的textAlign="center"比较特殊。textAlign的值为center时候文本的居中是基于你在fillText的时候所给的x的值，也就是说文本一半在x的左边，一半在x的右边

textBaseline = value
描述绘制文本时，当前文本基线的属性。
top
文本基线在文本块的顶部。
middle
文本基线在文本块的中间。
bottom
文本基线在文本块的底部。

measureText

measureText() 方法返回一个 TextMetrics 对象，包含关于文本尺寸的信息（例如文本的宽度）

canvas中文本水平垂直居中

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}body{ background:black;}#c1{ background:white;}</style></head><body><canvas id="c1" width="400" height="400"></canvas></body><script type="text/javascript">window.onload = function(){var oC =document.getElementById('c1');if(oC.getContext){var oGC = oC.getContext('2d');oGC.font = '30px impact';oGC.textBaseline = 'middle';var w = oGC.measureText('中国').width;oGC.fillText('中国',(oC.width - w)/2 , (oC.height - 60)/2);}};</script>
</html>

阴影(文本阴影&盒模型阴影)

shadowOffsetX = floatshadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们默认都为 0。
shadowOffsetY = floatshadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们默认都为 0。
shadowBlur = floatshadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
shadowColor = color(必需项)shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}body{ background:black;}#c1{ background:white;}</style></head><body><canvas id="c1" width="400" height="400"></canvas></body><script type="text/javascript">window.onload = function(){var oC =document.getElementById('c1');var oGC = oC.getContext('2d');//文本阴影&盒阴影oGC.shadowOffsetX = 20;oGC.shadowOffsetY = 20;oGC.shadowBlur = 30;oGC.shadowColor = "yellow";oGC.font = '60px impact';oGC.textBaseline = 'middle';  //middle bottomvar w = oGC.measureText('尚硅谷').width;oGC.fillText('尚硅谷',(oC.width - w)/2 , (oC.height - 60)/2);//oGC.fillRect(0,0,100,100);};</script>
</html>

canvas绘制文本文本的相关推荐

【Android 应用开发】Canvas 精准绘制文字 ( 文本边界坐标解析 | 绘图位置 )
文章目录一.文本边界坐标解析二.绘图位置一.文本边界坐标解析在上一篇博客 [Android 应用开发]Canvas 精准绘制文字 ( 测量文本真实边界 | 将文本中心点与给定中心点对齐 ) 中 ...
android 字体动画,android 对绘制的文本添加动画
场景: 存在较多绘制内容的区域需要某些动画效果, 需要尽量少修改视图的绘制方法,做到动画与绘制分离. 看个简单例子: image 我在一个视图上绘制了一行文字,先看一下绘制部分的代码: public ...
HTML弧度文本,[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...
canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 str ...
android drawtext参数,drawText参数介绍及绘制居中文本
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 在android自定义控件中经常用到canvas.drawText方法来绘制文本,我自己在用这个方法的时候,有很多迷惑, ...
【opencv图像处理】--2. 颜色空间，绘制图形，绘制(中文)文本
"人群里敞着一扇门" 1. 颜色空间的基础知识 1.1 色彩空间转换 2. mat数据结构的深浅拷贝 ndarray的常见属性 3.颜色通道的分离和合并 4. 绘制图形 5. 绘制 ...
creo 6.0—11：圆角、倒角绘制，文本（文字）创建
11 creo圆角.倒角绘制,文本(文字)创建 1.圆角绘制: 首先绘制一个矩形,对该矩形进行圆角的绘制: 圆角有以下几种方式形成首先,最基本的方式为: 1.两边选定式--圆形按钮分别左键点击 ...
SVG基本使用（二常用属性、绘制路径/文本/超链接/图片、结构标签）
一.SVG常用属性 1.fill: 修改填充颜色 2.fill-opacity: 0~1 设置填充颜色的透明度 3.stroke: 修改描边颜色 4.stroke-width: 修改描边宽度 5.st ...
android canvas绘制圆角_Android自定义View撸一个渐变的温度指示器(TmepView)
秦子帅明确目标,每天进步一点点..... 作者 | andy 地址 | blog.csdn.net/Andy_l1/article/details/82910061 1.概述自定义View对需要 ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
小猿圈html5教程之canvas绘制线段方法
HTML5现在是时下较火的编程语言之一,但是对于怎么学习很多朋友都是不了解的,不知道从何处下手,针对以上内容小猿圈web前端讲师每天会分享一个web前端知识,希望对你的前端学习有一定的帮助,今天分享的 ...