首先要申明本人对于美除了美女真没什么要求。
其次讲讲次学习碰到重要知识点：
1、画圆（弧）：
context.arc(x, y, radius, Math.PI / 180 * startAngle, Math.PI / 180 * endAngle, anticlockwise);
x:横坐标；
y：纵坐标；
radius：半径；
startAngle：Math.PI / 180 这个在数学上表示1度，这边需要用圆弧表示，所以需要多少就写多少。表示弧线开始的角度。
endAngle：同理，表示弧线结束的角度。
anticlockwise：是否逆时针，true：逆时针，false：顺时针。
2、context.moveTo(x, y):将起画坐标移动到某个坐标上。如果不指定则从当前位置开始画。
3、context.translate(x, y)：将(x, y)这个坐标设置成(0,0)；
4、context.save()：用于保存context的设置和变换，可以保存多个通过restore方法返回。可多次调用。
5、context.restore()：用户获取保存的context设置和变换，可多次调用。
直接上代码了：
<!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>
原文地址：https://www.cnblogs.com/lwxiao/p/10591524.html
时间： 2024-10-06 10:54:42