自己理解canvas里面的beginPath();closePath();save();restore();

最新推荐文章于 2024-08-14 07:29:53 发布

一顿操作猛如虎，啥也不是！

最新推荐文章于 2024-08-14 07:29:53 发布

阅读量2.8k

点赞数

分类专栏： canvas JavaScript html5

本文链接：https://blog.csdn.net/Sayesan/article/details/48055447

版权

html5 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

canvas

3 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

<html>
<head>
</head>
<body>
       <canvas id = "myCanvas" width = '500' height = '500'>Canvas画线技巧</canvas>
<script>
    var myCanvas = document.getElementById("myCanvas");
    var context =  myCanvas.getContext("2d");
        context.fillStyle ='rgba(255,0,0,.3)';//填充颜色：红色，半透明
        context.strokeStyle ='rgba(0,255,0,.3)';//线条颜色：绿色
        context.lineWidth = 13;//设置线宽
        context.beginPath();
        context.moveTo(200,100);
        context.lineTo(100,200);
        context.lineTo(300,200);
        context.closePath();//可以把这句注释掉再运行比较下不同
        context.stroke();//画线框
        context.fill();//填充颜色
        context.save();

        context.strokeStyle ='rgba(0,0,0,1)';//线条颜色：绿色
        context.lineWidth = 13;//设置线宽
        context.beginPath();
        context.moveTo(400,300);
       
        context.lineTo(300,400);
        context.lineTo(500,400);
        context.closePath();//可以把这句注释掉再运行比较下不同
        context.stroke();//画线框
        
        //context.restore();
       
        context.moveTo(1,1);
        context.lineTo(100,100);
        context.stroke();
        
</script>
</body>
</html>