位置：广州松河 > 技术支持 > 利用HTML5的Canvas制作简单的动画

利用HTML5的Canvas制作简单的动画

来源：网络整理时间：2023/2/14 0:19:31 共 3609 浏览

<canvas>是使用脚本（通常是javascript）来绘制图形的HTML5元素。可以用它来绘制图形，处理图片效果，还可用来制作动画。不过，<canvas>本身并不不具备任何绘图的功能，它只是一个图形的容器，我们必须使用脚本来绘制图形。除了HTML全局属性之外，<canvas>只有两个属性：

属性名	单位	描述
width	像素	设定<canvas>的宽度，默认值300
height	像素	设定<canvas>的高度，默认值150

getContext()方法会返回一个对象，该对象提供了在<canvas>上绘图的方法和属性，通过这些方法，我们可以在<canvas>上绘制文本、线条、矩形、圆形等各种图形。

接下来用<canvas>制作一个展示当前系统时间的动画时钟。时钟上的主要元素有：小时刻度、分钟刻度、时针、分针、秒针（由一条直线和两个圆形组成）和边框。

canvas不能将每个绘制的对象单独从画布中移除，只能清除绘图区域，然后重新绘制。所以，绘制前必须首先清除绘画区域，然后在绘画区域中绘制钟盘刻度、时针、分针、秒针、时钟边框，指针的旋转角度根据当前时间计算。

设置一个定时器，将上面的绘图流程每秒重复十次，每次绘制时钟时，先清除了上一次绘制的时钟，然后根据当前的时间重新绘制，时钟看上去就像在走一样。

图1

绘制前，需要使用getContext('2d')获取绘制二维图形的对象，绘制时钟我们用到了该对象下面一些的属性和方法：

属性或方法名	描述
save()	保存当前绘画对象的状态
clearRect()	清除一个矩形区域中的所有像素
translate()	将指定的坐标设置为新的坐标原点（0，0）
scale()	按比例放大或缩小当前绘制的内容
rotate()	将当前画笔顺时针旋转，单位弧度，2π旋转为一周
strokeStyle	设置或取得当前画笔的边框颜色等
fillStyle	设置或取得当前画笔的填充颜色等
lineWidth	设置或取得当前线条宽度
lineCap	设置或取得线条端点形状
beginPath()	开始或重置当前的绘图路径
moveTo()	将路径移动到一个新的路径点，但不创建线条
lineTo()	将路径移动到一个新的路径点，并原路径点和新路径点之间创建一个线条
arc()	绘制圆形或弧形
stroke()	填充刚定义的路径
restore()	返回至最近一次保存的绘画对象状态

下面是完整的代码：

	
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript">
function init(){
  clock();
  setInterval(clock,100);
}
function clock(){
  var now = new Date();

  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.save();
  ctx.clearRect(0,0,150,150);
  ctx.translate(75,75);
  ctx.scale(0.4,0.4);
  ctx.rotate(-Math.PI/2);
  ctx.strokeStyle = "black";
  ctx.fillStyle = "white";
  ctx.lineWidth = 8;
  ctx.lineCap = "round";

  // 绘制小时刻度
  ctx.save();
  for (var i=0;i<12;i++){
    ctx.beginPath();
    ctx.rotate(Math.PI/6);
    ctx.moveTo(100,0);
    ctx.lineTo(120,0);
    ctx.stroke();
  }
  ctx.restore();

  // 绘制分钟刻度
  ctx.save();
  ctx.lineWidth = 5;
  for (i=0;i<60;i++){
    if (i%5!=0) {
      ctx.beginPath();
      ctx.moveTo(117,0);
      ctx.lineTo(120,0);
      ctx.stroke();
    }
    ctx.rotate(Math.PI/30);
  }
  ctx.restore();
  
  //获取当前时间的毫秒、秒、分钟、小时数值
  var ms = now.getMilliseconds( );
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hr  = now.getHours();
  hr = hr>=12 ? hr-12 : hr;

  ctx.fillStyle = "black";

  // 绘制时针
  ctx.save();
  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
  ctx.lineWidth = 14;
  ctx.beginPath();
  ctx.moveTo(-20,0);
  ctx.lineTo(80,0);
  ctx.stroke();
  ctx.restore();

  // 绘制分针
  ctx.save();
  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
  ctx.lineWidth = 10;
  ctx.beginPath();
  ctx.moveTo(-28,0);
  ctx.lineTo(112,0);
  ctx.stroke();
  ctx.restore();

  // 绘制秒针
  ctx.save();
  ctx.rotate((sec+ms/1000) * Math.PI/30);
  ctx.strokeStyle = "#D40000";
  ctx.fillStyle = "#D40000";
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.moveTo(-30,0);
  ctx.lineTo(83,0);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0,0,10,0,Math.PI*2,true);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(95,0,10,0,Math.PI*2,true);
  ctx.stroke();
  ctx.fillStyle = "#555";
  ctx.arc(0,0,3,0,Math.PI*2,true);
  ctx.fill();
  ctx.restore();
  
  // 绘制时钟圆形外框
  ctx.beginPath();
  ctx.lineWidth = 14;
  ctx.strokeStyle = '#325FA2';
  ctx.arc(0,0,142,0,Math.PI*2,true);
  ctx.stroke();

  ctx.restore();
}
  </script>

</head>
<body onload="init()">
  <canvas id="canvas">您的浏览器不支持Canvas标签</canvas>
</body>

</html>

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：easyDialog v2.0 | ·下一条：jquery如何判断div是否隐藏