HTML canvas系列-绘制实心文本（6）
程序员文章站
2022-05-30 19:43:20
...
HTML canvas系列-绘制实心文本（6）
1、方法
fillText(text,x,y)
| 参数 | 说明 |
|---|---|
| text | 文本 |
| x | 开始的x坐标 |
| y | 开始的y坐标 |
2、属性
- font 字体 “bold 40px 宋体”; 样式有 normal, italic, or bold，默认是normal
- fillStyle 字体颜色
3、示例 -绘制文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>画图</title>
</head>
<body>
<!-- 定义canvas元素 -->
<canvas id="chart" width="450" height="200" style="border: 1px solid black;"></canvas>
<script>
//创建上下文
var canvas = document.getElementById('chart');
var ctx = canvas.getContext('2d');
ctx.font = 'bold 40px 宋体';
ctx.fillStyle = '#0000ff';
ctx.fillText('Hello World!', 100, 100);
</script>
</body>
</html>
推荐阅读
-
HTML5 在canvas中绘制文本附效果图
-
Html5 Canvas初探学习笔记(3) -绘制样式和绘制文本
-
html5 canvas的绘制文本自动换行的示例代码
-
小强的HTML5移动开发之路（6）——Canvas图形绘制基础
-
HTML canvas系列-绘制空心文本（7）
-
HTML canvas系列-绘制实心文本（6）
-
canvas绘制文本_我们如何学习在HTML5 Canvas上绘制文本
-
《HTML5 Canvas游戏开发实战》——2.3 绘制文本
-
[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
-
HTML5 Canvas绘制文本及图片的基础教程_html5教程技巧