DeepSeek用canvas制作的石英钟
<h3>效果</h3><div id="showRes" style="margin: 30px; text-align: center;"></div>
<h3>代码（JS部分未做任何改动）</h3>
<div id="hEdiv"><pre id="hEpre">
<style>
.clock_wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 640px;
background: #f0f0f0;
margin: 0 auto;
}
canvas {
box-shadow: 0 0 20px rgba(0,0,0,0.1);
border-radius: 50%;
background: white;
}
</style>
<div class="clock_wrapper">
<canvas id="clock" width="400" height="400"></canvas>
</div>
<script>
const canvas = document.getElementById('clock');
const ctx = canvas.getContext('2d');
// 高清屏适配
const scale = window.devicePixelRatio || 1;
canvas.width = 400 * scale;
canvas.height = 400 * scale;
ctx.scale(scale, scale);
function drawClock() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 获取当前时间
const now = new Date();
const hours = now.getHours() % 12;
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const milliseconds = now.getMilliseconds();
// 表盘样式
const centerX = canvas.width / 2 / scale;
const centerY = canvas.height / 2 / scale;
const radius = Math.min(centerX, centerY) - 10;
// 绘制表盘背景
const gradient = ctx.createRadialGradient(
centerX, centerY, 0, centerX, centerY, radius
);
gradient.addColorStop(0, '#f8f8f8');
gradient.addColorStop(1, '#e0e0e0');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fill();
// 绘制边框
ctx.strokeStyle = 'linear-gradient(45deg, #666, #999)';
ctx.lineWidth = 8;
ctx.beginPath();
ctx.arc(centerX, centerY, radius - 4, 0, Math.PI * 2);
ctx.stroke();
// 绘制小时刻度
ctx.lineWidth = 3;
ctx.strokeStyle = '#333';
for (let i = 0; i < 12; i++) {
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(i * 30 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, -radius + 20);
ctx.lineTo(0, -radius + 40);
ctx.stroke();
ctx.restore();
}
// 绘制分钟刻度
ctx.lineWidth = 1;
ctx.strokeStyle = '#666';
for (let i = 0; i < 60; i++) {
if (i % 5 === 0) continue; // 跳过小时刻度
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(i * 6 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, -radius + 25);
ctx.lineTo(0, -radius + 35);
ctx.stroke();
ctx.restore();
}
// 绘制数字
ctx.font = '16px Arial';
ctx.fillStyle = '#333';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for (let i = 1; i <= 12; i++) {
const angle = i * 30 * Math.PI / 180;
const x = centerX + Math.sin(angle) * (radius - 60);
const y = centerY - Math.cos(angle) * (radius - 60);
ctx.fillText(i.toString(), x, y);
}
// 计算指针角度
const secondAngle = (seconds + milliseconds / 1000) * 6; // 每秒6度
const minuteAngle = (minutes + seconds / 60) * 6;
const hourAngle = (hours + minutes / 60) * 30;
// 绘制时针
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(hourAngle * Math.PI / 180);
ctx.fillStyle = '#333';
ctx.shadowColor = 'rgba(0,0,0,0.2)';
ctx.shadowBlur = 8;
ctx.shadowOffsetY = 3;
ctx.beginPath();
ctx.moveTo(-4, 0);
ctx.lineTo(0, -radius * 0.5);
ctx.lineTo(4, 0);
ctx.arc(0, 0, 4, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
// 绘制分针
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(minuteAngle * Math.PI / 180);
ctx.fillStyle = '#666';
ctx.beginPath();
ctx.moveTo(-3, 0);
ctx.lineTo(0, -radius * 0.7);
ctx.lineTo(3, 0);
ctx.arc(0, 0, 3, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
// 绘制秒针
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(secondAngle * Math.PI / 180);
ctx.strokeStyle = '#e74c3c';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(0, radius * 0.1);
ctx.lineTo(0, -radius * 0.8);
ctx.stroke();
ctx.restore();
// 绘制中心圆点
ctx.beginPath();
ctx.fillStyle = '#e74c3c';
ctx.arc(centerX, centerY, 4, 0, Math.PI * 2);
ctx.fill();
requestAnimationFrame(drawClock);
}
drawClock();
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
var runCodes = (str,target) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
target.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
runCodes(hEpre.innerText, showRes);
</script> 我得去找一下黑黑前面的石英钟和这个对比一下{:4_173:} 指针这样有大小头的倒是更好看些呢{:4_187:} 谢谢老师辛苦，学习了。 美妙的。 红影 发表于 2025-2-27 23:28
我得去找一下黑黑前面的石英钟和这个对比一下
比比才知道，AI真是妙 红影 发表于 2025-2-27 23:30
指针这样有大小头的倒是更好看些呢
DS对指针的设置确实很好。
DS在实现用户需求时会罗里啰嗦夫地分析一大堆，贴心的是，它提到石英钟应该有交互功能但用户没有提到就算了。 梦江南 发表于 2025-2-28 07:53
谢谢老师辛苦，学习了。
DS AI 辛苦，我就问问而已，然后把代码整理一下合适论坛发布即可，谈不上辛苦，辛苦的是DS和服务器的显卡 庶民 发表于 2025-2-28 07:58
美妙的。
我试过微信的元宝，它也接入了DeepSeek，速度要比DS官方的快 非常真实，这个DS用得是越来越顺手了。。{:4_199:}
看到出来的代码JS部分没有做任何改动，那就是一键生成。。
输入的指令必须清晰有效。。
我好奇的是咒语怎么写的，白老师你是怎么命令它的。。{:4_170:}
花飞飞 发表于 2025-2-28 19:25
看到出来的代码JS部分没有做任何改动，那就是一键生成。。
输入的指令必须清晰有效。。
我好奇的是咒语怎 ...
就像问朋友借钱一样：你可以借我5毛钱吗 花飞飞 发表于 2025-2-28 19:22
非常真实，这个DS用得是越来越顺手了。。
它本来就顺手，除了有点慢 马黑黑 发表于 2025-2-28 20:39
就像问朋友借钱一样：你可以借我5毛钱吗
{:4_170:}
我刚才让它给我做一段代码，画一个长方形边框，里面有个蓝色小球左右运动，触碰边框返回，无限循环。。
生成到是很快，可惜不会让它动。哈哈 马黑黑 发表于 2025-2-28 20:39
它本来就顺手，除了有点慢
它加了思考时间，相对来说是得慢一点吧 马黑黑 发表于 2025-2-28 12:22
比比才知道，AI真是妙
是啊，什么都能弄出来呢{:4_199:} 马黑黑 发表于 2025-2-28 12:24
DS对指针的设置确实很好。
DS在实现用户需求时会罗里啰嗦夫地分析一大堆，贴心的是，它提到石英钟应该 ...
它居然还想到了交互功能，这个太细致了{:4_187:} 红影 发表于 2025-2-28 21:55
它居然还想到了交互功能，这个太细致了
{:4_181:} 红影 发表于 2025-2-28 21:53
是啊，什么都能弄出来呢
差不多的吧。@樵歌 写的诗词它还能谱曲唱出来{:4_170:} 花飞飞 发表于 2025-2-28 20:51
我刚才让它给我做一段代码，画一个长方形边框，里面有个蓝色小球左右运动，触碰边框返回，无 ...
可能你的要求不够明确。你可以叫它做个论坛帖子，1024*640，要求里面有个蓝色小球循环移动，动画可控。