怎么利用HTML5 Canvas制作键盘及鼠标动画


这篇文章将为大家详细讲解有关怎么利用HTML5 Canvas制作键盘及鼠标动画,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
  键盘控制小球移动
  众所周知,我们所看到的动画实际上就是一系列静态画面快速切换,从而让肉眼因视觉残像产生了「画面在活动」的视觉效果。明白了这一点后,在canvas上绘制动画效果就显得比较简单了。我们只需要将某个静态图形先清除,然后在另外一个位置重新绘制,如此反复,让静态图形按照一定的轨迹进行移动,就可以产生动画效果了。
  下面,我们在canvas上绘制一个实心小球,然后用键盘上的方向键控制小球的移动,从而产生动态效果。示例代码如下:
  JavaScript Code复制内容到剪贴板
  html>
  html5?canvas绘制可移动的小球入门示例
  您的浏览器不支持canvas标签
  //获取Canvas对象(画布)
  var?canvas?=?document.getElementById(“myCanvas”);
  //表示圆球的类
  function?Ball(x,?y?,radius,?speed){
  this.x?=?x?||?10;?//圆球的x坐标,默认为10
  this.y?=?y?||?10;?//圆球的y坐标,默认为10
  this.radius?=?radius?||?10;?//圆球的半径,默认为10
  this.speed?=?speed?||?5;//圆球的移动速度,默认为5
  //向上移动
  this.moveUp?=?function(){
  this.y?-=?this.speed;
  if(this.y?
  //防止超出上边界
  this.y?=?this.radius;
  }
  };
  //向右移动
  this.moveRight?=?function(){
  this.x?+=?this.speed;
  var?maxX?=?canvas.width?-?this.radius;
  if(this.x?>?maxX){
  //防止超出右边界
  this.x?=?maxX;
  }
  };
  //向左移动
  this.moveLeft?=?function(){
  this.x?-=?this.speed;
  if(this.x?
  //防止超出左边界
  this.x?=?this.radius;
  }
  };
  //向下移动
  this.moveDown?=?function(){
  this.y?+=?this.speed;
  var?maxY?=?canvas.height?-?this.radius;
  if(this.y?>?maxY){
  //防止超出下边界
  this.y?=?maxY;
  }
  };
  }
  //绘制小球
  function?drawBall(ball){
  if(typeof?ctx?免费云主机域名!=?”undefined”){
  ctx.beginPath();
  ctx.arc(ball.x,?ball.y,?ball.radius,?0,?Math.PI?*?2,?false);
  ctx.fill();
  }
  }
  //清空canvas画布
  function?clearCanvas(){
  if(typeof?ctx?!=?”undefined”){
  ctx.clearRect(0,?0,?400,?300);
  }
  }
  var?ball?=?new?Ball();
  //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
  if(canvas.getContext){
  //获取对应的CanvasRenderingContext2D对象(画笔)
  var?ctx?=?canvas.getContext(“2d”);
  drawBall(ball);
  }
  //onkeydown事件的回调处理函数
  //根据用户的按键来控制小球的移动
  function?moveBall(event){
  switch(event.keyCode){
  case?37://左方向键
  ball.moveLeft();
  break;
  case?38://上方向键
  ball.moveUp();
  break;
  case?39://右方向键
  ball.moveRight();
  break;
  case?40://下方向键
  ball.moveDown();
  break;
  default://其他按键操作不响应
  return;
  }
  clearCanvas();//先清空画布
  drawBall(ball);?//再绘制最新的小球
  }关于“怎么利用HTML5 Canvas制作键盘及鼠标动画”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

相关推荐: 字中划线CSS与HTML标签的示例分析

这篇文章主要介绍字中划线CSS与HTML标签的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 1、CSS属性免费云主机域名单词和代码 单词:text-decoration 中划线值 text-decoration:line-th…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 10/21 23:00
下一篇 10/21 23:01

相关推荐