老师这里不加save 和restore 有什么区别嘛
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
background: skyblue;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas'),
xt = canvas.getContext('2d');
canvas.width = '700';
canvas.height = '700';
// xt.save();
xt.arc(300,400,150,0,2*Math.PI,false);
xt.fillStyle='pink';
xt.fill();
xt.translate(300,400)
for(var i =0 ;i<4;i++){
xt.rotate(Math.PI/2);
xt.moveTo(0,-150);//圆心在哪 哪里就是原点
xt.lineTo(0,-130);
}
xt.moveTo(0,0);
xt.lineTo(80,0);
xt.moveTo(0,0);
xt.lineTo(15,-90);
xt.stroke();
// xt.restore();
</script>
</body>
</html>
还有这两个属性 具体是什么 可以做什么 它可以保存之前的什么属性
正在回答 回答被采纳积分+1
同学你好，在同学的代码里是没有什么区别的。因为save和restore用来保存和恢复上下文的环境的。
可以添加一些代码看下：
在如下地方，又添加一条线：
如果添加save和restore来保存之前的“表”的环境，那么这条线不会受到“表”的影响，如下：
效果：
另，ctx.save() 写在开头，保存当前上下文环境，包括图形变换和样式；ctx.restore() 恢复环境（恢复到上一次的上下文环境） 保存的是二者之间的环境，让后续的代码不受前面影响。
建议同学再回顾下之前的课程，地址：https://class.imooc.com/lesson/812#mid=20319
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星