HTML5快速入门实例（二）使用Canvas绘制文本

最新推荐文章于 2024-02-26 11:07:08 发布

GPU小码农

最新推荐文章于 2024-02-26 11:07:08 发布

阅读量686

点赞数

分类专栏： HTML5 文章标签：开发工具 html5 html5游戏开发 html

本文链接：https://blog.csdn.net/zjc_game_coder/article/details/44650177

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

其实学起来还是蛮容易的，是吧，嘿嘿。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Html5游戏开发学习</title>
</head>
<body>
<canvas id="canvas" width="600" height="600" style="broder:black 1px solid;">
    浏览器不支持HTML5 canvas
</canvas>
<script type="text/javascript" charset="utf-8">
    //获取canvas对象的引用
    var canvas = document.getElementById('canvas');
    //获取canvas的2d绘图环境
    var context = canvas.getContext('2d');
    //绘图代码如下:

    //绘制文本
    context.fillText('This is some text......',330,40);
    //修改字体
    context.font = '10 pt Arial';
    context.fillText('This is in 10 pt Arial...',330,60);
    context.font = '16 pt Arial';
    context.strokeText('This is stroked in 16 pt Arial',330,80);
</script>
</body>
</html>

运行效果：