HTML5学习(2) canvas标签的使用三

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

Symbol

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

阅读量1.1k

点赞数

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

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

版权

HTML5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<head>
</head>
<body>
    <canvas id="myCanvas" width="200px" height="200px"></canvas>
    <script type="text/javascript">
        var obj = document.getElementById("myCanvas");
        var cxt = obj.getContext("2d");
        <!--  设置起点 -->
        cxt.moveTo(20,20);
        <!--  绘制线条 -->
        cxt.lineTo(180,180);
        cxt.lineTo(20,180);
        cxt.lineTo(180,20);
        cxt.stroke();
    </script> 
    <!--
    stroke() 方法绘制当前路径的边框。路径定义的几何线条产生了
    但线条的可视化取决于 strokeStyle、lineWidth、lineJoin、lineCap 和 miterLimit 等属性。
    术语“勾勒”，指的是钢笔或笔刷的画笔。它意味着“画......轮廓”。
    和 stroke() 方法相对的是 fill()，该方法会填充路径的内部区域而不是勾勒出路径的边框。
     -->
</body>

心得:

getContext("2d")对象使用很频繁.

moveTo()函数设置起点

lineTo()函数连线

Symbol

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习(2) canvas标签的使用三

var obj = document.getElementById("myCanvas"); var cxt = obj.getContext("2d"); cxt.moveTo(20,20); cxt.lineTo(180,180); cxt.lineTo(20,180); cxt
复制链接

扫一扫