Canvas放置反弹效果随机图形(实例)


Posted in Javascript onAugust 17, 2017

Canvas放置反弹效果随机图形(实例)

var raf;
  var arror = [];
  var running = false;
  //绘制圆形
  function createBall() {
    return {
      x: 0,
      y: 0,
      vx: 10-Math.random()*10,
      vy: 10-Math.random()*10,
      radius: 25,
      color:"red",
      draw: function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fillStyle = this.color;
        ctx.fill();
      }
    }
  }
  //绘制正方形
  function createSquare() {
    return {
      x: 0,
      y: 0,
      vx: 10-Math.random()*10,
      vy: 10-Math.random()*10,
      color:"red",
      draw: function() {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y,30, 30);
        ctx.closePath();
      }
    }
  }
  //绘制五角星
  function createStar() {
    return {
      x: 0,
      y: 0,
      vx: 10-Math.random()*10,
      vy: 10-Math.random()*10,
      color:"red",
      draw: function() {
        ctx.font = "24px serif";
        ctx.textBaseline = "hanging";
        ctx.fillStyle=this.color;
        ctx.fillText("五角星",this.x, this.y);

      }
    }
  }
  //绘制三角形
  function createTriangle() {
    return {
      x: 0,
      y: 0,
      vx: 10-Math.random()*10,
      vy: 10-Math.random()*10,
      color:"red",
      draw: function() {
        ctx.beginPath();
        ctx.moveTo(this.x,this.y);
        ctx.lineTo(this.x+25,this.y+25);
        ctx.lineTo(this.x+25,this.y-25);
        ctx.fillStyle=this.color;
        ctx.fill();
      }
    }
  }
  //清除
  function clear() {
    ctx.fillStyle = 'rgba(255,255,255,0.3)';
    ctx.fillRect(0,0,canvas.width,canvas.height);
  }

//判断图形坐标是否超出画布范围
  function draw() {
    clear();
    arror.forEach(function(ball, i){
      ball.draw();
      ball.x += ball.vx;
      ball.y += ball.vy;
      if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
        ball.vy = -ball.vy;
      }
      if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
        ball.vx = -ball.vx;
      }
    });

    raf = window.requestAnimationFrame(draw);
  }
  canvas.addEventListener('click',function(e){
    if (!running) {
      raf = window.requestAnimationFrame(draw);
      running = true;
    }
    var colorarr=["#000000","#7F7F7F","#880015","#ED1C24","#FF7F27","#FFF200","#22B14C","#00A2E8","#3F48CC","#A349A4","#B97A57","#FFAEC9","#B5E61D"];
    var Graphics = ["Round","Square","Star","Triangle"];
    var typexz=Graphics[Math.floor(Math.random()*4)];
    var ball;
    switch(typexz){
      case "Round":
        ball = createBall();
        break;
      case "Square":
        ball = createSquare();
        break;
      case "Star":
        ball = createStar();
        break;
      case "Triangle":
        ball = createTriangle();
        break;
    }
    ball.x = e.clientX;
    ball.y = e.clientY;
    ball.color = colorarr[Math.floor(Math.random() * 10 + 3)];
    arror.push(ball);
  });
  draw();
 document.addEventListener('keydown',function (e) {
   if(e.keyCode==32){
     event.preventDefault();
     window.cancelAnimationFrame(raf);
     running = false;
   }
 })

以上这篇Canvas放置反弹效果随机图形(实例)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery替换字符串(实例代码)
Nov 13 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 Javascript
js实现方块上下左右移动效果
Aug 17 #Javascript
JavaScript中一些特殊的字符运算
Aug 17 #Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 #Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 #Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 #jQuery
详解JS中的柯里化(currying)
Aug 17 #Javascript
JavaScript实现简单评论功能
Aug 17 #Javascript
You might like
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
python中删除某个元素的方法解析
2019/11/05 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
"序列点" 是什么
2016/07/29 面试题
linux面试题参考答案(6)
2014/08/29 面试题
大学生暑期实践感言
2014/02/26 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
倡议书格式
2014/08/30 职场文书
英语复习计划
2015/01/19 职场文书
药店收银员岗位职责
2015/04/07 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
日元符号 ¥
2022/02/17 杂记