我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

我的想法

我的电脑屏幕一直都是暗系的（你的呢？），最近感觉突然想换一种风格的尝试尝试新口味。各种资源找了一遍越找越感觉都不满意。我感觉可能是我口味太刁钻了。没办法只能自己做一个了。

演示效果

之前的

$54Q_RG@{GNY%_7AI`E%%6XX.png$

改成了这样的

我们来说一些怎么实现的

首先创建一个画布

<canvas id="testCanvas" width="550" height="500">

好了项目结束。

如果真的这样就好了，哈哈哈。这只是html部分结束了。我们的重头戏在js部分。至于样式部分我就改了一些logo的和整体的背景，没什么好说的我们主要说一下js，这里我们用到了一个类库叫easeljs这是它的文档大家有兴趣可以看一下：链接

简单说一下CreateJS库的其中一部分,CreateJS是一个使用HTML5,创作出丰富,交互体验的Javascript库和工具集合.EaselJS Javascript 库为包含一个完整分层显示列表的Canvas提供一个图形保留模式------交互模式,其中的类使得在canvas 2D 图形上更容易工作.EaselJS为HTML Canvas 创作出丰富图形和交互体验提供一种直接有效的解决方案.主要用它

1.创建位图

2.绘制矢量图

3.创建动画

4.绘制文本

5.控制DOMElement

小案例：

  //Create a stage by getting a reference to the canvas
    stage = new createjs.Stage("demoCanvas");
    //Create a Shape DisplayObject.
    circle = new createjs.Shape();
    circle.graphics.beginFill("red").drawCircle(0, 0, 40);
    //Set position of Shape instance.
    circle.x = circle.y = 50;
    //Add Shape instance to stage display list.
    stage.addChild(circle);
    //Update stage will render next frame
    stage.update();

K[)SA]_}0BVTB6816KIIXFU.png

四叶草部分

首先创建画布

canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var w = canvas.width;
var h = canvas.height;

container = new createjs.Container();
stage.addChild(container);

captureContainers = [];
captureIndex = 0;

创建大量四叶草的向量形状，并为其提供随机位置和速度：

var shadow = new createjs.Shadow("#000", 2,2,5);

for (var i = 0; i < 50; i++) {
  var heart = new createjs.Container();   
  var h1 = new createjs.Shape();
  h1.graphics.beginFill(createjs.Graphics.getHSL(Math.random() * 30 - 230, 100, 50 + Math.random() * 30)).p("AC3H6QgEg1hHi/IhGi0QAIBPgDAzQgDA9gWB1QgLA7guAoQgtAng+AHQhAAHg7geQhAgigohHQhJiCBrh7QBDhNBxg4IgtAOQh9Ajh6gLQhGgGgjhIQgghEALhdQALhgA0hFQA6hOBagOQCggZBhCNQAxBHARBLQgLhLAGhTQAOilBhgnQBjgnBkA3QAzAcAeAkQBZCBh2B/Qg8BAhNAmIBEgUQBIgTAVgBQCzgHAsB3QAuB7g/BhQgtBDhCAWQhDAVhgg7Qhhg7hQh5QCREgASBXQARBYgNALQgOALgQAEIgMABQggAAgDgwg")
  h1.shadow = shadow;
  heart.addChild(h1);
  heart.cache(-80,-80,160,160,0.5);
  heart.y = -100;

  container.addChild(heart);
}

创建logo

var text = new createjs.Text("juejin\nfeixue!", "bold 64px 'Irish Grover'", "#020");
text.textAlign = "center";
text.x = w / 2;
text.y = h / 2 - text.getMeasuredLineHeight();
stage.addChild(text);

for (i = 0; i < 100; i++) {
  var captureContainer = new createjs.Container();
  captureContainer.cache(0, 0, w, h);
  captureContainers.push(captureContainer);
}

还有一些事件处理我就不说了大家可以到我发布的码上掘金看看原代码。最后我将效果用其他软件给做成了背景。用起来还是挺好的。

我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

寻护眼壁纸无果，自己做一个

我的想法

演示效果

我们来说一些怎么实现的

四叶草部分