年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1817|回复: 0

[demo实战] 用canvas制作绚丽小球

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2018-1-13 20:25:09 | 显示全部楼层 |阅读模式
    1、先上一张静态效果图,在线演示地址:http://www.yusian.com/vue/demo/canvas_ball

    屏幕快照 2018-01-13 下午8.08.36.png

    2、实现思路
    2.1、该demo涉及到的点有两个:ES6新特性class及继承、画布canvas中2d渲染的简单使用;
    2.2、ES6中对类的定义越来越像高级语言java的特点,基本格式如:
    [JavaScript] 纯文本查看 复制代码
    class xxx extends xxx {
      constructor() {
        super();
      }
    }

    2.3、画布2d渲染基本步骤为获取上下文、开启渲染、渲染相关、结束渲染等,这是一个面向过程编程的操作;
    2.4、效果实现思路:获取画布及画布2d上下文、定义一个画圆的对象及能自动变小的方法、监听鼠标指针事件、事件触发生成对象、动态刷新画布;

    3、部分js代码:
    [JavaScript] 纯文本查看 复制代码
    // 1、获取当前画布
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    canvas.width = 800;
    canvas.height = 600;
    
    // 自定义类
    class Ball {
      constructor(x, y, color){
        this.x = x;
        this.y = y;
        this.color = color;
        this.r = 50;
      }
      render(){
        context.save();
        context.beginPath();
        context.arc(this.x, this.y, this.r, 0, Math.PI*2);
        context.fillStyle = this.color;
        context.fill();
        context.restore();
      }
    }
    class MoveBall extends Ball {
      constructor(x, y, color) {
        super(x, y, color);
      }
      update(){
        this.x += sa_random(-5, 5);
        this.y += sa_random(-5, 5);
        this.r -= sa_random(1, 3);
        if (this.r < 0) this.r = 0;
      }
    }
    
    // 随机函数
    function sa_random(m, n) {
      let r = Math.random(); // 0 ~ 1
      return Math.floor(r*(n-m)+m); // m ~ n
    }
    
    // 监听鼠标事件添加对象到画布
    let ballArray = new Array();
    canvas.addEventListener('mousemove', function(e){
      let color = 'rgb('+sa_random(0,255)+','+sa_random(0,255)+','+sa_random(0,255)+')';
      ballArray.push(new MoveBall(e.offsetX, e.offsetY, color));
    });
    
    // 定时刷新画布
    setInterval(function(){
      context.clearRect(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < ballArray.length; i++) {
        ballArray[i].render();
        ballArray[i].update();
          if (ballArray[i].r == 0) ballArray.splice(i, 1);
      }
    }, 50);
    
    4、源代码下载
    游客,如果您要查看本帖隐藏内容请回复
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-29 09:08 , Processed in 0.046394 second(s), 21 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表