提取自: Silva Zhou视频教程
画圆,外圆被截取?
注意: 画圆的半径是以宽度(lineWidth
)的一半画的,所以只需要减去一半就可以了
<body>
<canvas id="clock" width="200px" height="200px"></canvas>
<script>
let clock = document.getElementById('clock')
let ctx= clock.getContext('2d')
let width = ctx.canvas.width
let height = ctx.canvas.height
let r = width / 2
let rem = width / 200
function drawBackground() {
ctx.translate(r,r)
ctx.beginPath()
ctx.lineWidth = 10
ctx.arc(0, 0, r, 0 ,2*Math.PI, false)
// ctx.arc(0, 0, r - 5, 0 ,2*Math.PI, false)
ctx.stroke()
}
drawBackground()
</script>
</body>
另外可以把
lineWidth
设置很大看看效果,黑色正方形,中间一个白圆
时钟案例
translate ,rotate ,save, restore, beginPath
2 PI RAD = 360
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>clock</title>
<style>
div{
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div>
<canvas id="clock" height="200px" width="200px"></canvas>
</div>
<script src="js/clock.js"></script>
</body>
</html>
let dom = document.getElementById('clock');
let ctx = dom.getContext('2d');
let width = ctx.canvas.width;
let height = ctx.canvas.height;
var r = width / 2;
//为了宽度高度放大是时,其他边框等比美观,所以设置一个比例
var rem = width / 200;
/*
200 / width = 10 / x
x = 10 * width / 200
*/
function drawBackground() {
ctx.save(); // 这个状态再最后画的时候要还原
ctx.translate(r, r);
ctx.beginPath(); //每次开始前必须开始一条路径
//按比例输出边框宽度,width/200=x/10=rem; 即 x=10 *rem
ctx.lineWidth = 10 * rem;
ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false);
ctx.stroke();
var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
hourNumbers.map(function (number, i) {
var rad = 2 * Math.PI / 12 * i; // 从3小时对应下标为0弧度
var x = Math.cos(rad) * (r - 30 * rem); // 文字小于外圆半径,所以要小一些
var y = Math.sin(rad) * (r - 30 * rem);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = 18 * rem + "px Arial";
ctx.fillText(number, x, y)
});
for (var i = 0; i < 60; i++) {
var rad = 2 * Math.PI / 60 * i;
var x = Math.cos(rad) * (r - 18 * rem);
var y = Math.sin(rad) * (r - 18 * rem);
ctx.beginPath();
if (i % 5 === 0) {
ctx.fillStyle = '#000';
} else {
ctx.fillStyle = '#ccc';
}
ctx.arc(x, y, 2 * rem, 2 * Math.PI, false);
ctx.fill();
}
}
function drawHour(hour, minute) {
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 12 * hour;
var mrad = 2 * Math.PI / 12 / 60 * minute; // 一个钟有60分钟,旋转角度
ctx.rotate(rad + mrad);
// 旋转是改变画布,不是画图的状态, 默认左上角,顺时针旋转 可以通过translate改变 , 刚开始已经改变了
// 先旋转再画, 改变的是坐标,不然不会变化
// 另外这个方法改变了画布, 下面画`分钟`的时候, 画布也是被旋转的,所以要先sava(),保存旋转钱状态,画完之后要restore()
ctx.lineWidth = 6 * rem;
ctx.moveTo(0, 10 * rem); // 往下面一点, 时针有尾巴
ctx.lineTo(0, -r / 2);
ctx.lineCap = 'round';
ctx.stroke();
ctx.restore();
}
function drawMinute(minute) {
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 60 * minute;
ctx.rotate(rad);
ctx.lineWidth = 3 * rem;
ctx.moveTo(0, 10 * rem);
ctx.lineTo(0, -r / 2 - 10);
ctx.lineCap = 'round';
ctx.stroke();
ctx.restore();
}
function drawSecond(second) {
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 60 * second;
ctx.rotate(rad);
ctx.lineWidth = 3;
ctx.moveTo(-2 * rem, 20 * rem);
ctx.lineTo(2 * rem, 20 * rem);
ctx.lineTo(1, -r + 18 * rem);
ctx.lineTo(1, -r + 18 * rem);
ctx.fillStyle = '#e4393c';
ctx.fill();
ctx.restore();
}
function drawDot() {
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(0, 0, 3 * rem, 2 * Math.PI, false);
ctx.fill();
}
function draw() {
ctx.clearRect(0, 0, width, height);
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
drawBackground();
drawHour(hour, minute);
drawMinute(minute);
drawSecond(second);
drawDot();
ctx.restore(); // 还原最初的样式 (不translate)
}
draw()
setInterval(draw, 1000);