如安在HTML5画布中绘制文本图形【html5教程】,HTML5,canvas,文本图形

如安在HTML5画布中绘制文本图形【html5教程】,HTML5,canvas,文本图形

在HTML5中,起首须要运用<canvas>标签建立画布,然后在画布中运用javascript的font属性、fillText()或strokeText()要领来绘制文本图形。

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网别的相干文章!

分享到 :