做一个canvas时钟（一）
<style>.mama { font: normal 18px / 26px sans-serfi; }
.mama p { margin: 12px 0; }
.mama mark { background: lightblue; padding: 0 6px; }
.wrap { margin: 20px auto 0; text-align: center; }
#canv { border: 1px solid gray; }
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<div class="mama">
<p>canvas画布是html5的一个绘画元素，我们可以用它来做一个时钟。我们的目标是通过几个章节的讨论最终能够实现一个正常运行的时钟，并通过对这一系列教程的跟进，能基本掌握基于canvas画布的相关知识，包含但不限于以下几点：</p>
<blockquote>① 创建画布；<br>② 绘制矩形、圆形；<br>③ 绘制文本；<br>④ 画布设置的存储与恢复；<br>⑤ canvas坐标系的转换。</blockquote>
<p>当然还包含其他做时钟无法绕开的知识层面，例如日期对象的处理、数学函数的应用等等。</p>
<p>画布的创建相当简单，它就是一个标准的HTML标签，可以使用标准的HTML创建方法来创建，也可以使用JS动态创建。canvas是一个行内标签，我们要令它水平居中就像令文本居中一样容易，可使用其父元素的CSS属性<mark>text-align: center;</mark>来实现，当然也可以改变canvas的行内标签属性来完成，本教程不采用此法。特别需要注意的是，canvas是基于像素来操作图像的，它拥有独特的尺寸表达规范，不能使用CSS设置其宽高，可通过HTML基于canvas标签的代码使用<mark>width</mark>和<mark>height</mark>属性来设置宽度与高度，或通过JS动态设置非CSS范畴的宽高尺寸，<mark>ID.width</mark>和<mark>ID.height</mark>，另外canvas有自己默认的宽高，300*150，缺省width和height属性时它会使用这个默认尺寸。</p>
<p>让我们来创建一个空白的canvas画布，本教程使用HTML方法，JS方法的代码也一并提供。我们给canvas画布一个父元素，相当于现实生活中作画时的画架吧，canvas画布就安放在它上（里）面：</p>
<div class='mum'>
<cl-cd data-idx="1"><span class="tGreen"><!-- ① html方法 ：教程采用的方法 --></span></cl-cd>
<cl-cd data-idx="2"> </cl-cd>
<cl-cd data-idx="3"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="4"> .wrap { <span class="tBlue">margin:</span> 20px auto 0; <span class="tBlue">text-align:</span> center; }</cl-cd>
<cl-cd data-idx="5"> #canv { <span class="tBlue">border:</span> 1px solid gray; }</cl-cd>
<cl-cd data-idx="6"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="7"> </cl-cd>
<cl-cd data-idx="8"><<span class="tDarkRed">div</span> class=<span class="tMagenta">"wrap"</span>></cl-cd>
<cl-cd data-idx="9"> <<span class="tDarkRed">canvas</span> <span class="tRed">id</span>=<span class="tMagenta">"canv"</span> width=<span class="tMagenta">"300"</span> height=<span class="tMagenta">"300"</span>><<span class="tDarkRed">/canvas</span>></cl-cd>
<cl-cd data-idx="10"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="11"> </cl-cd>
<cl-cd data-idx="12"><span class="tGreen"><!-- ② JS方法 --></span></cl-cd>
<cl-cd data-idx="13"> </cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"wrap"</span> style=<span class="tMagenta">"<span class="tBlue">margin:</span> 20px auto 0; <span class="tBlue">text-align:</span> center;"</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="15"> </cl-cd>
<cl-cd data-idx="16"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">let</span> canv = <span class="tRed">document</span>.createElement(<span class="tMagenta">'canvas'</span>);</cl-cd>
<cl-cd data-idx="18"> canv.width = 300;</cl-cd>
<cl-cd data-idx="19"> canv.height = 300;</cl-cd>
<cl-cd data-idx="20"> canv.style.setProperty(<span class="tMagenta">'border'</span>, <span class="tMagenta">'1px solid gray'</span>);</cl-cd>
<cl-cd data-idx="21"> wrap.appendChild(canv);</cl-cd>
<cl-cd data-idx="22"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
<p>效果：</p>
<div class="wrap"><canvas id="canv" width="300" height="300"></canvas></div>
<p>这就是 300*300 的canvas画布，它除了边框其他一无所有。这是空白画布，边框是CSS设定出来的，它不是必须的，其作用是便于我们观察，包括将来在画布上作画的时候，边框也能让我们感觉到所绘制的内容和画布边界的距离关系。</p>
</div> 又是一个特别好的内容，开始跟着一点点学起来{:4_199:} 红影 发表于 2024-3-21 21:16
又是一个特别好的内容，开始跟着一点点学起来
以前也讲过canvas，希望这一次更容易理解 “创建一个空白的canvas画布”，“给canvas画布一个父元素，相当于现实生活中作画时的画架吧”
这个比喻十分形象呢{:4_199:} 红影 发表于 2024-3-21 21:18
“创建一个空白的canvas画布”，“给canvas画布一个父元素，相当于现实生活中作画时的画架吧”
这个比喻 ...
HTML元素间的关系，父辈、子孙辈是很分明的 先瞄一眼，今天得早下，明天再上来看看 小辣椒 发表于 2024-3-21 21:45
先瞄一眼，今天得早下，明天再上来看看
{:4_190:} 奇怪看不到效果{:5_102:}黑黑晚上好 {:4_179:} 马黑黑 发表于 2024-3-21 21:17
以前也讲过canvas，希望这一次更容易理解
是的，以前讲过的，这次必须更好好学习{:4_187:} 马黑黑 发表于 2024-3-21 21:20
HTML元素间的关系，父辈、子孙辈是很分明的
是的，看得出，画布是在父元素之下的子元素。 大猫咪 发表于 2024-3-21 21:51
奇怪看不到效果黑黑晚上好
现在是空白的画布，等你在上面画一个能走的时钟 红影 发表于 2024-3-21 22:41
是的，看得出，画布是在父元素之下的子元素。
{:4_190:} 红影 发表于 2024-3-21 22:39
是的，以前讲过的，这次必须更好好学习
{:4_191:} 马黑黑 发表于 2024-3-21 22:44
画布已经撑开，就等着上面的美妙时钟了{:4_187:} 马黑黑 发表于 2024-3-21 22:45
这个是非常的好东东{:4_187:} 红影 发表于 2024-3-21 22:48
画布已经撑开，就等着上面的美妙时钟了
时钟一下子还不行，得一步一步走，要有工匠精神 红影 发表于 2024-3-21 22:49
这个是非常的好东东
谢谢 马黑黑 发表于 2024-3-21 22:49
时钟一下子还不行，得一步一步走，要有工匠精神
嗯嗯，知道了，这个不急，一步步跟就是了{:4_205:} 马黑黑 发表于 2024-3-21 22:50
谢谢
黑黑辛苦了{:4_190:} 红影 发表于 2024-3-21 23:01
黑黑辛苦了
阔气阔气，应该的