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

来源：互联网发布：山东省工程造价软件编辑：程序博客网时间：2024/05/12 13:14

<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>

0 0