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 相关文章推荐
js自定义事件代码说明
Jan 31 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
Underscore源码分析
Dec 30 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 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
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
PHP _construct()函数讲解
2019/02/03 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
JS解析XML实例分析
2015/01/30 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
JS常用知识点整理
2017/01/21 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
解析Python中的异常处理
2015/04/28 Python
Django 使用logging打印日志的实例
2018/04/28 Python
python挖矿算力测试程序详解
2019/07/03 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
html5新特性与用法大全
2018/09/13 HTML / CSS
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
技术总监的工作职责
2013/11/13 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
Vue vee-validate插件的简单使用
2021/06/22 Vue.js