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 相关文章推荐
自动更新作用
Oct 08 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 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
PHP4.04简明安装
2006/10/09 PHP
php解析json数据实例
2014/08/19 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
python实现机器人行走效果
2018/01/29 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
Java基础知识面试题
2014/03/25 面试题
应届生法律顾问求职信
2013/11/19 职场文书
仓库规划计划书
2014/04/28 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
车辆委托书范本
2014/10/05 职场文书
2015年底工作总结范文
2015/05/15 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS