当前第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画布中绘制文本图形的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
如何使用插件数字滚动插件numberanimate.js？
详解HTML5网络拓扑图整合openlayers实现gis地图应用（图）
借助todataurl实现将HTML5 canvas的内容保存为图片
HTML5 canvas实现绘制一个像素宽的细线
html格式什么意思?
用h5实现手机摇一摇的实例详解
【h5开发工具】2017最好用的10种HTML5应用开发工具推荐
10款好看且实用的文字动画特效，让你的页面更吸引人！
HTML5中的postmessage api基本使用方法分享
HTML5表单相关元素和属性
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 如何在HTML5画布中绘制文本图形
