HTML5的<canvas>标签能够用于在网页上绘制种种图形,那末怎样绘制文本图形?本篇文章就给人人引见在HTML5画布中绘制文本图形的要领,愿望对你们有所协助。【视频教程引荐:HTML5教程】
运用<canvas>标签建立画布
在HTML页面上,画布是一个的矩形地区。它运用canvas标签元素指定;默许情况下,画布中是没有边框、没有内容的,它就像一个容器。但我们能够运用它内置的属性或许css来增加一些款式。
例:运用width属性和height 属性设置宽高。
<canvas id = "mycanvas" width ="400" height ="250"> </canvas>
我们还能够运用css来给画布增加边框、背景色彩,例:
<canvas id="myCanvas" width="300" height="200" style="border:2px solid red;background-color:pink">当前的浏览器不支持HTML5 canvas标签。</canvas>
假如没法建立画布时,就会显现<canvas>标签内的内容,提醒当前的浏览器不支持HTML5 canvas标签。
效果图:
运用JavaScript在画布中绘制文本图形
起首我们来看看要在画布上绘制文本图形,须要用到的最主要的属性和要领:
1、font属性:定义文本的字体属性,经由过程font属性能够设置或返回画布上文本内容的当前字体属性。它的运用和CSS font属性类似。
2、fillText()要领:在画布上绘制“添补”文本,文本的色彩默许为:黑色。基础语法为:
fillText(text, x, y, [maxWidth])
3、strokeText()要领:在画布上绘制文本(无添补),也就是说绘制文本表面图形;一样,文本色彩默许为:黑色。基础语法为:
strokeText(text, x, y, [maxWidth])
参数申明:
text:示意在画布上须要输出的文本图形。
x,y:相对于画布来讲,最先绘制文本的 x 坐标、y 坐标位置
maxWidth:可选参数,示意许可的最大文本宽度,单元为像素。
我们来看看其他能够运用到的文本的款式属性:
1、textAlign款式属性:依据X轴坐标,设置或返回文本内容的当前对齐体式格局。
取值有:start(默许值,指定文本的最先位置)、end(指定文本的完毕位置)、center(指定文本中间的安排位置)、left(左对齐)、right(右对齐)。
2、fillStyle属性:设置或返回用于添补绘画的色彩、渐变或形式。
下面我们来绘制文本图形,经由过程示例来看看怎样绘制:
例1:运用fillText()
<canvas id ="myCanvas" width ="400" height ="250" style="border:2px solid red;">当前浏览器不支持HTML5 canvas标记。</canvas>
<script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "40px Arial"; ctx.fillText("ki4网!",10,50); </script>
效果图:
例2:运用strokeText()
<script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "40px Arial"; ctx.strokeText("ki4网!",10,50); </script>
效果图:
例3:增加色彩和中间文本
<script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font="30px Comic Sans MS"; ctx.fillStyle = "red"; ctx.textAlign = "center"; ctx.fillText("ki4网!",canvas.width/2, canvas.height/2); </script>
效果图:
总结:以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。
以上就是怎样在HTML5画布中绘制文本图形的细致内容,更多请关注ki4网别的相干文章!