使用 Canvas 制作绚丽的倒计时效果。
总结
- HTML
1 | <canvas id="canvas></canvas> |
- JavaScript
- canvas 画布坐标
- 获取 canvas 节点
- 获取上下文绘图环境
context
- 使用
context
进行绘制 - Canvas 绘图,总是先绘制状态,再调用函数绘制
- 绘制直线
- 绘制弧线
- 开始/结束路径,并非成对出现
context
属性 – 状态的改变- 绘制线条,填充图形
- 画布中矩形区域的刷新
canvas
画布接口- 动画函数
setInterval
1 | var canvas = document.getElementById("canvas"); |
一些实例
- 检测浏览器是否支持 canvas 标签
1 | <canvas>不支持Canvas</canvas> //浏览器不支持Canvas标签,则会显示标签的内容。 |
绘制直线/三角形
绘制线条与填充图形下的
beginPath()
与closePath()
七巧板
下落的小球
绚丽的倒计时效果