 |
位置：电子教程 > HTML5入门电子教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > HTML5入门电子教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：HTML5入门电子教程 > Canvas 文本 | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： Canvas 路径 | 下一篇： Canvas 渐变 |
|
使用 canvas 绘制文本，重要的属性和方法如下： n font - 定义字体 n fillText(text,x,y) - 在 canvas 上绘制实心的文本 n strokeText(text,x,y) - 在 canvas 上绘制空心的文本 示例：使用 fillText()绘制实心文字使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心），下面我们来看下在网页中的效果，示例代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Canvas - 文本-使用 fillText()绘制实心文字</title> </head> <body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("黄菊华老师",10,50); </script>
</body> </html> 效果如图7-6。
示例：使用strokeText()绘制空心文字使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心），下面我们来看下在网页中的效果，示例代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Canvas - 文本-使用strokeText()绘制空心文字</title> </head> <body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("黄菊华老师",10,50); </script>
</body> </html> 效果如图7-7。
|
|
| 上一篇： Canvas 路径 | 下一篇： Canvas 渐变 |
