请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
canvas画布是html5的一个绘画元素，我们可以用它来做一个时钟。我们的目标是通过几个章节的讨论最终能够实现一个正常运行的时钟，并通过对这一系列教程的跟进，能基本掌握基于canvas画布的相关知识，包含但不限于以下几点：
① 创建画布；
② 绘制矩形、圆形；
③ 绘制文本；
④ 画布设置的存储与恢复；
⑤ canvas坐标系的转换。
当然还包含其他做时钟无法绕开的知识层面，例如日期对象的处理、数学函数的应用等等。
画布的创建相当简单，它就是一个标准的HTML标签，可以使用标准的HTML创建方法来创建，也可以使用JS动态创建。canvas是一个行内标签，我们要令它水平居中就像令文本居中一样容易，可使用其父元素的CSS属性text-align: center;来实现，当然也可以改变canvas的行内标签属性来完成，本教程不采用此法。特别需要注意的是，canvas是基于像素来操作图像的，它拥有独特的尺寸表达规范，不能使用CSS设置其宽高，可通过HTML基于canvas标签的代码使用width和height属性来设置宽度与高度，或通过JS动态设置非CSS范畴的宽高尺寸，ID.width和ID.height，另外canvas有自己默认的宽高，300*150，缺省width和height属性时它会使用这个默认尺寸。
让我们来创建一个空白的canvas画布，本教程使用HTML方法，JS方法的代码也一并提供。我们给canvas画布一个父元素，相当于现实生活中作画时的画架吧，canvas画布就安放在它上（里）面：
<!-- ① html方法 ：教程采用的方法 -->
<style>
.wrap { margin: 20px auto 0; text-align: center; }
#canv { border: 1px solid gray; }
</style>
<div class="wrap">
<canvas id="canv" width="300" height="300"></canvas>
</div>
<!-- ② JS方法 -->
<div id="wrap" style="margin: 20px auto 0; text-align: center;"></div>
<script>
let canv = document.createElement('canvas');
canv.width = 300;
canv.height = 300;
canv.style.setProperty('border', '1px solid gray');
wrap.appendChild(canv);
</script>
效果：
这就是 300*300 的canvas画布，它除了边框其他一无所有。这是空白画布，边框是CSS设定出来的，它不是必须的，其作用是便于我们观察，包括将来在画布上作画的时候，边框也能让我们感觉到所绘制的内容和画布边界的距离关系。
| 
发表于 2024-3-21 21:12
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-3-21 21:51
黑黑晚上好 
