标签：canvas tran 保存 位置 rest anti .text 逆时针 多个
首先要申明本人对于美除了美女真没什么要求。
其次讲讲次学习碰到重要知识点：
1、画圆（弧）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Refresh" content="1" />
<title>canvas draw clcok</title>
<script>
window.onload = function(){
var drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");
console.log(context);
//边框颜色
context.fillStyle = "#999";
//填充色 字体颜色
context.strokeStyle = "#999";
//画圆心黑点
context.beginPath();
context.arc(100, 100, 5, 0, 2*Math.PI, false);
context.fill();
context.closePath();
context.beginPath();
context.arc(100, 100, 99, 0, 2*Math.PI, false);
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2*Math.PI, false);
context.font=‘bold 16px sans-serif‘;
context.textAlign=‘center‘;
context.textBaseline=‘middle‘;
context.fillText("1", 145, 30);
context.fillText("2", 170, 60);
context.fillText("3", 185, 100);
context.fillText("4", 170, 140);
context.fillText("5", 145, 170);
context.fillText("6", 100, 185);
context.fillText("7", 55, 170);
context.fillText("8", 30, 140);
context.fillText("9", 15, 100);
context.fillText("10", 30, 60);
context.fillText("11", 55, 30);
context.fillText("12", 100, 15);
context.closePath();
var nowDate = new Date();
var hours = nowDate.getHours();
if(hours > 12){
hours = hours - 12;
}
var mins = nowDate.getMinutes();
var seconds = nowDate.getSeconds();
console.log("hours : " + hours + ",mins : " + mins + ",seconds : " + seconds)
context.translate(100, 100);
context.moveTo(0, 0);
context.save(); //用于保存context的设置和变换，可以保存多个通过restore方法返回。
// 时针
context.restore();
context.save();
context.rotate(Math.PI / 180 * 6 * hours );
context.lineTo(0, -50);
// 分针、
context.restore();
context.save();
context.moveTo(0, 0);
context.rotate(Math.PI / 180 * 6 * mins);
context.lineTo(0, -60);
// 秒针、
context.restore();
context.moveTo(0, 0);
context.rotate(Math.PI / 180 * 6 * seconds);
context.lineTo(0, -70);
context.stroke();
}
}
</script>
</head>
<body>
<h2 style="text-align: center;color:#007ACC">clcok</h2>
<div>
<canvas id="drawing" width="500px" height="500px">
</canvas>
</div>
</body>
</html>
标签：canvas tran 保存 位置 rest anti .text 逆时针 多个
原文地址：https://www.cnblogs.com/lwxiao/p/10591524.html
