很多时候跟着书和不系统的视频学习,会发现没有方向,学了很多却不知道自己能够做出什么成绩。
学习要有一个清晰的职业学习规划,学习过程中会遇到很多问题,你可以到我们的web学习交流君羊-点击此处,
同时准备了基础,进阶学习资料。学友都会在里面交流,分享一些学习的方法和需要注意的小细节,每天也会准时讲一些项目实战案例。
数学表达式calc()是CSS中的函数,主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路。相关视频教程推荐:
本篇文章给大家带来的内容是关于Canvas绘制出时钟的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
完整代码:
Document
div {
text-align: center;
margin-top: 250px;
}
vardom = document.getElementById('clock');
varctx = dom.getContext('2d');
varwidth = ctx.canvas.width;
varheight = ctx.canvas.height;
varr = width / 2;
//绘制表盘
functiondrawBackground() {
ctx.save();
ctx.translate(r, r);
ctx.beginPath();
ctx.lineWidth = 10;
ctx.arc(0, 0, r - 5, 0, 2 * Math.PI, false);
ctx.stroke();
varhourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
ctx.font = '18px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
//小时数字
hourNumbers.forEach(function(number, i) {
varrad = 2 * Math.PI / 12 * i;
varx = Math.cos(rad) * (r - 30);
vary = Math.sin(rad) * (r - 30);
ctx.fillText(number, x, y);
// console.log(x)
})
//绘制分刻度
for(vari = 0; i < 60; i++) {
varrad = 2 * Math.PI / 60 * i;
varx = Math.cos(rad) * (r - 18);
vary = Math.sin(rad) * (r - 18);
ctx.beginPath();
if(i % 5 == 0) {
ctx.fillStyle = '#000';
ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
} else{
ctx.fillStyle = '#ccc';
ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
}
ctx.fill();
}
}
//绘制时针
functiondrawHour(hour, minute) {
ctx.save();
ctx.beginPath();
varrad = 2 * Math.PI / 12 * hour;
varmrad = 2 * Math.PI / 12 / 60 * minute;
ctx.rotate(rad + mrad);
ctx.lineWidth = 6;
ctx.lineCap = 'round';
ctx.moveTo(0, 10);
ctx.lineTo(0, -r / 2);
ctx.stroke();
ctx.restore();
}
//绘制分针
functiondrawMinute(minute) {
ctx.save();
ctx.beginPath();
varrad = 2 * Math.PI / 60 * minute;
ctx.rotate(rad);
ctx.lineWidth = 3;
ctx.lineCap = 'round';
ctx.moveTo(0, 10);
ctx.lineTo(0, -r + 30);
ctx.stroke();
ctx.restore();
}
//绘制秒针
functiondrawSecond(second) {
ctx.save();
ctx.beginPath();
ctx.fillStyle = 'red'
varrad = 2 * Math.PI / 60 * second;
ctx.rotate(rad);
ctx.moveTo(-2, 20);
ctx.lineTo(2, 20);
ctx.lineTo(1, -r + 18);
ctx.lineTo(-1, -r + 18);
ctx.fill();
ctx.restore();
}
//绘制指针的端点
functiondrawDot() {
ctx.beginPath();
ctx.fillStyle = 'white';
ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
ctx.fill();
}
//动起来
functiondraw() {
//清除之前所绘制的
ctx.clearRect(0, 0, width, height);
varnow = newDate();
varhour = now.getHours();
varminute = now.getMinutes();
varsecond = now.getSeconds();
drawBackground();
drawHour(hour, minute);
drawMinute(minute);
drawSecond(second)
drawDot();
ctx.restore();
}
//draw();
setInterval(draw, 1000);
以上就是Canvas绘制出时钟的代码示例的详细内容,
相关链接:
canvas实现五子棋游戏的代码示例
关于canvas绘制饼图的方法介绍(代码)
关于书籍:需要学习资料的小伙伴们可以加群,点击此处