HTML canvas系列-绘制空心文本（7）
程序员文章站
2022-05-30 19:43:08
...
HTML canvas系列-绘制空心文本（7）
1、方法
strokeText(text,x,y)
| 参数 | 说明 |
|---|---|
| text | 文本 |
| x | 开始的x坐标 |
| y | 开始的y坐标 |
2、属性
- font 字体 “bold 40px 宋体”; 样式有 normal, italic, or bold，默认是normal
- lineWidth 线框
- strokeStyle字体颜色
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.lineWidth = 2;
ctx.strokeStyle = '#0000ff';
ctx.strokeText('Hello World!', 100, 100);
</script>
</body>
</html>
上一篇： H3C设备配置wifi
下一篇： 33 canvas绘制文本