Canvas 应用 互动版

Canvas动画教程-画小丑
介绍 Kinetic基本结构 绘制界面 页面加载进行绘图 绘制小丑左右眼 绘制小丑鼻子和嘴巴 左右眼动画 鼻子和嘴巴动画
时钟效果
简介 绘制时钟圆形外框 绘制小时刻度 绘制分钟刻度 获取当前时间的数值 绘制时针 绘制分针 绘制秒针 最终效果展示
图像缩放和裁剪
简介 界面布局和元素 实现图像大小调整 实现图像移动 实现图像裁剪
Canvas简单实用的图表 - Chart.js
简介 使用方法 创建图表 绑定数据 小结
  1. 全部教程
  2. Canvas 应用
  3. Canvas 应用
  4. 最终效果展示

最终效果展示

最终我们通过应用canvas中方法，通过setInterval()方法，设定每隔1000毫秒，重新绘制一次时钟。这就让它动起来了。

function init(){
  clock();
  setInterval(clock,1000); //每一秒钟重新绘制一次
}