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

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