Canvas如何绘制空心文字？

图形开发canvashtml5

在HTML5的Canvas中，我们可以使用fillText()函数来绘制文本。默认情况下，这个函数绘制的文本是实心的。然而，如果你想绘制空心文本，需要用到strokeText()函数。

以下是一个简单的示例：

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>  
<html>  
<body>  

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">  
Your browser does not support the HTML5 canvas tag.  
</canvas>  

<script>  
window.onload = function() {  
    var canvas = document.getElementById('myCanvas');  
    var ctx = canvas.getContext('2d');  

    // 绘制空心文字  
    ctx.font = "40px 黑体";
    ctx.strokeText("绘制空心中文", 50, 150);
}  
</script>  

</body>  
</html>

在这个示例中，我们使用ctx.strokeText()来绘制一个空心的文本。

上一篇：Canvas怎么实现绘制直角三角形功能？

下一篇：时钟动画Canvas代码怎么实现？