HTML5学习(2) canvas的使用一

最新推荐文章于 2024-07-02 22:34:09 发布

Symbol

最新推荐文章于 2024-07-02 22:34:09 发布

阅读量444

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/wcf_szkingdom/article/details/7877613

版权

HTML5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

声明:以下内容均是本人参照W3school教程编写.

<!DOCTYPE HTML>
<head>
</head>
<body>
    <canvas width="200px" height="200px" id="myCanvas" ></canvas>
    <script type="text/javascript">
        var obj = document.getElementById("myCanvas");
        <!-- getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 -->
        var cxt = obj.getContext("2d");
        <!-- fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸--> 
        cxt.fillStyle="#FF0000";
        <!-- 在画布上绘制 150x75 的矩形，150:宽度,70:高度 从左上角开始 (0,0) -->
        cxt.fillRect(0,0,150,75); 
    </script>
</body>

使用心得:

getContext("2d')对象的构建

fillStyle 渲染颜色

fillRect 形状控制