.save() 和 .restore()
- 除了会保存之前的样式，还会保存之前的坐标轴
pen.translate(x, y);
将画布的 坐标轴原点(0, 0) 从画布的左上角，移动到 (x, y)
- 必须再绘制之前，移动坐标轴
- 改变 画布坐标轴 之前的绘制，不受影响。
pen.scale(x, y);
x 设置水平方向上缩放倍数
y 设置垂直方向上缩放倍数
- 参照画布 绘制坐标轴原点(0, 0)
pen.rotate(radian);
radian 弧度 = deg*Math.PI/180
- 参照画布 的绘制坐标轴原点 (0, 0) radian 增大 顺时针旋转 坐标轴
- 本次旋转，会参照此刻坐标轴的角度，累加旋转，
旋转 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>旋转</title> <style type="text/css">
body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif;
} #wrap {
/*
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
*/
}
</style>
</head> <body> <div id="wrap">
<canvas id="my_canvas" width="600" height="600">
您的浏览器不支持 canvas，建议更新或者更换浏览器。
</canvas>
</div> <!-- javascript 代码 -->
<script type="text/javascript">
// 1. 获取画板
var myCanvas = document.getElementById("my_canvas"); // 给画布一个颜色
myCanvas.style.backgroundColor = "#eee"; // 2. 获取画笔
var pen = myCanvas.getContext("2d"); // 3. 一定要在绘制之前 设置好
pen.fillStyle = 'olive'; // 填充的颜色
pen.strokeStyle = "blue"; // 笔的颜色
pen.lineWidth = 4; // 笔宽
pen.lineCap = "round"; // 圆形结束
pen.lineJoin = "round"; // 圆角 var radian = 0; var chgScale = 1;
var val = -0.1;
window.setInterval(function(){
chgScale += val;
if(chgScale < 0 ){
val = 0.1;
chgScale = 0+0.1;
}
if(chgScale > 2){
val = -0.1;
chgScale = 2-0.1;
} pen.restore();
// 4.开始绘制
pen.clearRect(0, 0, myCanvas.width, myCanvas.height);
pen.beginPath();
pen.save();
pen.translate(200, 200);
pen.scale(chgScale, chgScale);
pen.rotate(radian*Math.PI/180);
pen.arc(0, 0, 100, 0, 2*Math.PI);
pen.rect(0, 0, 100, 100);
pen.stroke();
radian += 4.5;
}, 1000); </script>
</body>
</html>
钟表 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>DIY Clock</title> <style type="text/css">
body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif;
} #wrap {
padding-left: 160px;
padding-top: 160px;
/*
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
*/
}
</style>
</head> <body> <div id="wrap">
<canvas id="my_canvas" width="600" height="600">
您的浏览器不支持 canvas，建议更新或者更换浏览器。
</canvas>
</div> <!-- javascript 代码 -->
<script type="text/javascript">
// 1. 获取画板
var myCanvas = document.getElementById("my_canvas"); // 给画布一个颜色
myCanvas.style.backgroundColor = "#eee"; // 2. 获取画笔
var pen = myCanvas.getContext("2d"); // 3. 一定要在绘制之前 设置好
pen.fillStyle = '#D40000'; // 填充的颜色
pen.strokeStyle = "#000"; // 笔的颜色
pen.lineWidth = 4; // 笔宽
pen.lineCap = "round"; // 圆形结束
pen.lineJoin = "round"; // 圆角 window.setInterval(diyClock, 1000); // 封装 diy 时钟
function diyClock(){
pen.clearRect(0, 0, myCanvas.width, myCanvas.height); pen.save();
pen.translate(300, 300);
//将整个画布逆时针旋转90度
pen.rotate(-90*Math.PI/180); pen.scale(0.5, 0.5); // 表盘 圆盘颜色:#325FA2 圆盘宽度:14 圆盘半径:140
pen.save();
pen.strokeStyle = "#325FA2";
pen.lineWidth = 14;
pen.beginPath();
pen.arc(0, 0, 140, 0, 2*Math.PI);
pen.stroke();
pen.restore(); // 分刻 宽度为4 长度为3 外层空心圆盘与分刻之间的距离也为20
pen.save();
var i = 0;
for(i=0; i<60; i++){
if(i%5 != 0){
pen.beginPath();
pen.moveTo(0, -120);
pen.lineTo(0,-117);
pen.stroke();
};
pen.rotate(6*Math.PI/180);
};
pen.restore(); // 时刻 宽度为8 长度为20 外层空心圆盘与时刻之间的距离也为20
pen.save();
pen.lineWidth = 8;
for(i=0; i<12; i++){
pen.beginPath();
pen.moveTo(0, -120);
pen.lineTo(0, -100);
pen.stroke();
pen.rotate(30*Math.PI/180);
};
pen.restore(); var curTime = new Date();
var seconds = curTime.getSeconds();
var minutes = curTime.getMinutes()+seconds/60;
var hours = curTime.getHours()+minutes/60; // 时针 宽度为14 圆心外溢出80 收20
pen.save();
pen.rotate(30*hours*Math.PI/180);
pen.lineWidth = 14;
pen.beginPath();
pen.moveTo(-20,0);
pen.lineTo(80,0);
pen.stroke();
pen.restore(); // 分针 宽度为10 圆心外溢出112 收28
pen.save();
pen.rotate(6*minutes*Math.PI/180);
pen.lineWidth = 10;
pen.beginPath();
pen.moveTo(-28,0);
pen.lineTo(112,0);
pen.stroke();
pen.restore(); // 秒针 颜色:#D40000 宽度为6 圆心外溢出83 收30
pen.save();
pen.rotate(6*seconds*Math.PI/180);
pen.strokeStyle = "#D40000";
pen.fillStyle = "#D40000";
pen.lineWidth = 6; pen.beginPath();
pen.moveTo(-30, 0);
pen.lineTo(83, 0);
pen.stroke(); // 秒针头 96码开外半径为10的空心圆 宽度为6
pen.beginPath();
pen.arc(96, 0, 10, 0, 2*Math.PI);
pen.stroke(); // 表芯半径为10的实心圆
pen.beginPath();
pen.arc(0, 0, 10, 0, 2*Math.PI);
pen.fill();
pen.restore();
pen.restore();
};
</script>
</body>
</html>