您的位置：首页 > 其它

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

2015-08-28 17:30 543 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航