当前第2页 返回上一页
例1：使用fillText()
1 | <canvas id ="myCanvas" width ="400" height ="250" style="border:2px solid red;">当前浏览器不支持HTML5 canvas标记。</canvas>
|
1 2 3 4 5 6 | <script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "40px Arial";
ctx.fillText("PHP中文网！",10,50);
</script>
|
效果图：
例2：使用strokeText()
1 2 3 4 5 6 | <script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "40px Arial";
ctx.strokeText("PHP中文网！",10,50);
</script>
|
效果图：
例3：添加颜色和中心文本
1 2 3 4 5 6 7 8 | <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("PHP中文网！",canvas.width/2, canvas.height/2);
</script>
|
效果图：
总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。
以上就是如何在HTML5画布中绘制文本图形的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
HTML5的页面结构需要注意那些方面
HTML5使用dom进行自定义控制
HTML5中返回音频/视频是否已暂停的属性paused
HTML5中转义实体字符，元数据， 跳转以及全局属性的图文详解
HTML5表单验证的解析
哪些浏览器支持HTML5
html中的title是什么意思？
h5可以导出成视频吗？
h5正常文本框提示语的实现方法
解析HTML5应用程序缓存application cache
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 如何在HTML5画布中绘制文本图形
