canvas简单直线代码

最新推荐文章于 2021-07-24 15:42:16 发布

虔诚的教徒

最新推荐文章于 2021-07-24 15:42:16 发布

阅读量415

点赞数

本文链接：https://blog.csdn.net/huangtianzhu123/article/details/63682975

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的直线回执</title>
    <style type="text/css">
        div{margin-top: 10px;margin-left: 100px}
    </style>
</head>
<body>
    <div>
        <canvas id="canvas" width="800px" height="800px"></canvas>
    </div>
<script type="text/javascript">
    var dom=document.getElementById("canvas");
    var ctx=dom.getContext('2d');
    ctx.lineWidth=10;
    ctx.beginPath();//清楚所有的点
    ctx.lineTo(100,200);//从上一个点开始到指定的点
    ctx.lineTo(300,400);
    ctx.lineTo(100,600);
    ctx.strokeStyle="#c12121";
    ctx.stroke();


    ctx.beginPath();
    ctx.lineWidth=10;
    ctx.moveTo(300,200);//从新开始另一个点
    ctx.lineTo(500,400);
    ctx.lineTo(300,600);
    ctx.strokeStyle="#efe455";
    ctx.stroke();


    ctx.beginPath();
    ctx.lineWidth=10;
    ctx.lineTo(500,200);
    ctx.lineTo(700,400);
    ctx.lineTo(500,600);
    ctx.strokeStyle="#a65912";
    ctx.stroke();

</script>
</body>
</html>