[Canvas学习]动画

学习目的:通过JavaScript操控<canvas>对象,实现交互动画。

动画的基本步骤

1. 清空canvas,使用clearRect方法

2. 保存canvas状态

3. 绘制动画图形

4. 恢复canvas状态

操控动画Controlling an animation

setInterval(function, delay)

setTimeout(function, delay)

requestAnimationFrame(callback)

太阳系运动的小例子

<canvas id="canvas" width="300" height="300"></canvas>
<script type="text/javascript">
  var sun = new Image();
  var moon = new Image();
  var earth = new Image();
  var cvs = document.getElementById("canvas");
  /**
  * 创建三张图片并完成动画
  * @return {[type]} [description]
  */
  function init(){
    sun.src = "image/Canvas_sun.png";
    earth.src = "image/Canvas_earth.png";
    moon.src = "image/Canvas_moon.png";
    requestAnimationFrame(draw);
  }
  /**
  * 分别通过平移旋转来设置不同的canvas状态完成三张图片的绘制
  * @return {[type]} [description]
  */
  function draw(){
    if(cvs.getContext){
      var ctx = cvs.getContext("2d");
      ctx.globalCompositeOperation = "destination-over";
      //1. 清空clearRect
      ctx.clearRect(0,0,300,300);
      //2. 保存canvas状态
      ctx.fillStyle = "rgba(0,0,0,0,4)";
      ctx.strokeStyle = "rgba(0,153,255,0.4)";
      ctx.save();
      ctx.translate(150,150);//sun图片大小为300*300
      //3. 绘制图片
      var time = new Date();
      //绘制地球
      ctx.rotate((2*Math.PI/60)*time.getSeconds()+(2*Math.PI/60000)*time.getMilliseconds());//1分钟=60秒,设置地球围绕太阳的旋转周期为1min
      ctx.translate(105, 0);//地球运行轨迹半径为105
      ctx.fillRect(0,-12,50,24);//地球阴影
      ctx.drawImage(earth, -12, -12);//地球图片大小为24*24
      ctx.beginPath();
      ctx.arc(0,0,28.5,0,Math.PI*2,false);
      ctx.closePath();
      ctx.stroke();

      ctx.save();
      //绘制月球//此时canvas状态为默认状态
      ctx.rotate((2*Math.PI/60)*time.getSeconds()+(2*Math.PI/60000)*time.getMilliseconds());
      ctx.translate(0,28.5);//月球的运行轨迹半径为28.5
      ctx.drawImage(moon, -3.5, -3.5);//月球图片大小为7*7

      ctx.restore();
      ctx.restore();
      //最初的canvas状态
      ctx.beginPath();
      ctx.arc(150,150,105,0,Math.PI*2,false);
      ctx.closePath();
      ctx.stroke();
      ctx.drawImage(sun, 0, 0, 300, 300);

      requestAnimationFrame(draw);
    }
  }
  init();
</script>

canvas绘制动画时钟

绘制时钟的方法有很多,分别介绍下不同的思路:

1. 利用canvas来绘制动画时钟,通过平移旋转来实现线段和圆的绘制

2. 利用HTML+CSS3来绘制动画时钟,也是通过CSS3的变形属性来实现线段和圆的绘制

这两种实现方法都需要通过JavaScript来确定当前的时间点,从而确定各个指针的初始位置。

绘制小球

加入控制元素,如物理碰撞检测等

时间: 2024-10-14 04:30:29

[Canvas学习]动画的相关文章

html5 canvas 学习笔记(一)

一.canvas元素API canvas元素并未提供很多API,实际上他只提供了两个属性与三个方法: 1.canvas元素属性 width 属性:与 height 属性: canvas元素绘图表面的宽度,在默认状况下,浏览器会将canvas元素大小设定成与绘图表面大小一致,然而如果在css中覆写了元素大小,那么浏览器则会将绘图表面进行缩放,使之符合元素尺寸.其值为非负整数,默认值为300. 2.canvas元素方法 getContext()方法: 返回与该canvas元素相关的绘图环境对象,每个

AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12

1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的代码差异:https://github.com/angular/angular-phonecat/compare/step-11...step-12 Dependencies(依赖的js库): bower.json { "name": "angular-seed", &

[HTML5 Canvas学习]使用颜色和透明度

在canvas中使用颜色和透明度,通过context的strokeStyle和fillStyle属性设置,strokeStyle和fillStyle的值可以是任意有效的css颜色字串.可以用RGB.RGBA.HSL.HSLA以及十六进制RGB标注来指定颜色,也可以通过 "yellow"."silver"."teal"这样的颜色名称来指定.除此之外,还可以使用SVG1.0规范中的颜色名称,比如"goldenrod"."

[HTML5 Canvas学习]绘制矩形

1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); context.lineJoin = 'round'; context.lineWidth = 20; context.strokeRect(10, 10,

iOS动画详解(学习动画看这一篇就够了)

iOS动画详解(学习动画看这一篇就够了) 一.基础知识 CAAnimation.png 二.CABasicAnimation 1. 动画的属性和解释 2.属性值的解释 repeatCount : 如果在swift中需要一直不断重复:Float.infinity,OC:HUGE_VALF timingFunction: timingFunction.png kCAMediaTimingFunctionLinear--在整个动画时间内动画都是以一个相同的速度来改变.也就是匀速运动.一个线性的计时函数

[转载]Android Bitmap和Canvas学习笔记

http://blog.chinaunix.net/uid-20771867-id-3053339.html [转载]Android Bitmap和Canvas学习笔记,布布扣,bubuko.com

Canvas 学习笔记1

#Canvas 学习笔记1 @[Canvas,Nunn,HTML5,javascript] ##前言 相信大家多多少少都有了解过`Canvas`,这里我就不多做解释了,网上也充斥了这方面的知识,很多人看了之后,其实发现作用非常小,因为似乎这些东西什么也做不了,本着学习提升自己,造福大家,我打算把我学习`Canvas`的历程记录在这里. 首先推荐大家先看看阮一峰大大写的这个[Canvas API](http://javascript.ruanyifeng.com/htmlapi/canvas.ht

canvas学习绘制渐变色

1.createLinearGradient() 创建线性渐变 //Linear adj. 直线的 线性的 //Gradient n. 梯度 变化率 createLinearGradient(x1,y1,x2,y2)--颜色渐变的起始坐标和终点坐标 addColorStop(位置,"颜色值")--0表示起点...插入点...1表示终点,配置颜色停止点 <!DOCTYPE html><html lang="en"><head> &l

canvas学习日记一

由于工作的需求,促进我学习html5 canvas技术,canvas是html5最强大的元素之一.使用它可以在浏览器中做一番奇妙的事情.大家或多或少都听过canvas的强大用处,我这里就不再赘述了. canvas的强大功能是通过canvas的context对象表现出来的,该环境变量是可以从canvas元素身上获取. 下面先看一个canvas的例子方便讲解:在canvas上显示一个字符串,该字符串大致与canvas水平垂直居中.代码如下: <!DOCTYPE HTML> <html lan