Canvas星空效果（JS面向对象）

概述

更多Canvas实例可以看GitHub，不定时更新：https://github.com/xiangshuo1992/canvas-demo

这个Demo主要有以下几点可以讨论：
1.HTML5 canvas的基础API，如 context.beginPath();
2.获取屏幕大小，并响应窗口大小变化
3.JS面向对象

先看效果 Canvas星空效果

width="100%" height="400" scrolling="no" title="Canvas星空效果" src="//codepen.io/xiangshuo1992/embed/MGgeOR/?height=265&theme-id=0&result&embed-version=2" allowfullscreen="true">See the Pen Canvas星空效果 by Luke.Deng (@xiangshuo1992) on CodePen.

代码实现

HTML

<canvas id="canvas">canvas>

CSS

#canvas {
     position: absolute;
     left: 0;
     top: 0;
     background-color: #000;
 }

JS

HTML5 Canvas基础API（只列举用到的）

 //获取canvas
 canvas = document.getElementById('canvas');
 //获取canvas执行上下文
 context = canvas.getContext('2d');
 //用于保存当前绘图环境
 context.save();
 //用户恢复最近一次的绘图环境
 context.restore();
 //开始一段新的路径绘图
 context.beginPath();
 //结束当前路径绘图
 context.closePath();
 //绘制起点到（x,y）点的直线
 context.lineTo(x, y);
 //当前绘图环境位移，水平X,垂直y
 context.translate(x, y);
 //当前绘图环境旋转angle度（弧度制）degree * Math.PI / 180
 context.rotate(angle);
 //设置或返回用于填充绘画的颜色、渐变或模式
 context.fillStyle;
 //填充当前绘图（路径）
 context.fill()
 //设置或返回用于阴影的模糊级别
 context.shadowBlur
 //设置或返回用于阴影的颜色
 context.shadowColor

获取屏幕大小并监听

监听窗口/文档大小变化事件，保证canvas铺满屏幕

function render() {
    //获取屏幕大小
    screenW = window.innerWidth ||
        document.body.clientWidth ||
        document.documentElement.clientWidth;

    screenH = window.innerHeight ||
        document.body.clientHeight ||
        document.documentElement.clientHeight;

    // 设置canvas大小
    // canvas.setAttribute('width', screenW);
    // canvas.setAttribute('height', screenH);

    canvas.width = screenW;
    canvas.height = screenH;

    window.addEventListener('resize', render);
}

JS面向对象写法

//构造函数（类）
function Star(config){this.config = config;}
//给类添加方法,JS用原型实现
Star.prototype.draw = function () { /*do something*/}
//实例化一个Star对象
let star = new Star(config)

当然这个对象写的不是很好，应该可以拆分出更细的一些操作放到原型上。

这里我把对象当组件来看，其实面向对象可能是组件化的一个过程。我们将面向对象的写法理解成组件化的过程可以这样理解：

============组件定制层==============
创建对象——>创建组件
对象属性——>组件配置属性
对象方法——>组件方法

============组件应用层==============
实例化对象——>实例化组件

之所以给组件分层，是因为除了基本的应用和定制层，一般组件还会有组件核心（基础）层
=========组件核心（基础）层==========
jQuery/Vue/…

ES6

const/let

// 定义变量
let canvas,
    context,
    screenW,
    screenH,
    stars = [];

// 定义常量
const FPS = 50,
    numStars = 2000;

箭头函数

//ES6定义函数
let fn = (param)=> { /*do something*/ }
//相当于
var fn = function(param){ /*do something*/ }

总结

纸上得来终觉浅，绝知此事要躬行！——《冬夜读书示子聿》陆游