html5绘制图形

裂魂人1214

于 2017-10-16 22:54:03 发布

阅读量529

点赞数

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

本文链接：https://blog.youkuaiyun.com/b422761838/article/details/78255524

版权

html5 专栏收录该内容

4 篇文章

订阅专栏

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="800" height="600" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    //笔触开始的位置
    cxt.strokeStyle = "#317cdd";
    cxt.lineWidth = "8";
    cxt.lineJoin = "miter"; //bevel斜角  round圆角   miter尖角
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    cxt.lineTo(300,300);
    //闭合路线
    cxt.closePath();
    cxt.stroke();
    //填充
    cxt.fillStyle = "#dd3b1a";
    cxt.fill();
</script>

</body>
</html>