新浦京81707con > 首页 > 噪点与烟雾效果,炫丽的倒计时效果

原标题:噪点与烟雾效果,炫丽的倒计时效果

浏览次数:80 时间:2019-05-02

canvas图形绘制之星空、噪点与气团雾效果

2016/06/07 · HTML5 · 1 评论 · Canvas

原稿出处: 张鑫旭(@张鑫旭)   

原文
http://www.zhangxinxu.com/wordpress/2017/03/canvas-2d-cool-affect-skills-technology/

上边先河确实的支付一个小游戏

一、三合一

三个功用合成一篇小说。

有多少个小伙伴问作者,为什么不开个公众号,未来都以活动时期,你博客小说写好后,公众号再复制壹份,花不了多长期,同时传播方便连忙,打赏方便急迅,鲜明低开销高收益。

从眼下来看,就好像的确如此。

可是,就本身个人来讲,行为和处分准则总是服从内心的直觉和大方向的指点。说不上实际的道理,正是感到,小说的输出源假使持续贰个,久远来看,带来的未知损耗一定要压倒短时间的已知收益。

取巧的事情多慎思而克己,就好比本文内容,实际上,多少个不等的canvas效果,直接分3篇来写,凑个文章数,扩充点浏览量其实也是未有什么能够指责的。然,想了想,有点不像自个儿的style,内心真实的友爱并不期待自个儿如此做,于是,就3个职能合体为一篇小说。

不容小片段的诱惑,让自个儿过得更自在。

正文的二个效益都以源自己近期做的多少个实在的门类,是canvas领域基本入门的有个别职能。代码小编都尤其重新梳理了下,供给注释也都丰硕去了,方便我们的上学。然后,假诺你有不懂的地点,请不要来问我,没错,是不要,作者并不招待你找小编来沟通,自个儿一点一点去弄了然。因为,假诺连这么基本的canvas效果都不精通,作者确实也帮不了你哪些。倒不是说腾不出时间,而是腾不出精力,每一日新浪私信还有邮箱找笔者的人还挺多,实在接待不暇。

打探canvas画布的劳作规律

实质上,canvas的做事原理和大家的荧屏是同1的,都以接踵而至 蜂拥而至的刷新绘制,刷新绘制,只可是显示器的基础代谢是实时的,而canvas的基础代谢手手动触发的。
举个简易例子,假诺大家目的在于一个圆圈圈从画布左侧移到画布左边的作用,大家能够在第二秒的时候让圆圈圈在最左侧,然后下1秒的时候,先用黑板擦把大家的圆圈圈擦掉,然后再另行画圆圈圈再往右偏一点的指南,就那样不断擦不断绘,大家肉眼看到的就是3个动画效果了。

此处首先介绍canvas全数接口的应用。包含beginpath,closePath,linejoin,miterlimit,translate,rotate,scale,linecap。

贰、canvas图形效果之旋转星空

图片 1

图是死的,效果是活的,IE九 浏览器下,您能够狠狠地方击这里:canvas实现的转动星空效果demo

会晤到地球上方会有众多轻易在日趋地绕着地球转啊转,星星在闪啊闪。

像那类密集型canvas效果,一般离不开上边那多少个重大字:实例,随机,变化与重绘,requestAnimationFrame。

原理正是:

  1. 先画二个职位发光度随机的静态的星星点点实例对象;
  2. 有一个方可更改轻易位置和发光度的draw方法;
  3. 电磁打点计时器跑起来,画布不停地铲除与绘图,动画效果完结!

原理相当粗略。

本例子实现的二个难题在于:

  1. 月歌唱家稀
    点滴垂直方向实际上是个伪随机,越接近地球,星星越密集,而越往上,越稀疏。其算法如下:
JavaScript

var getMinRandom = function() { var rand = Math.random(); //
step的大小决定了星星靠近地球的聚拢程度, // step = Math.ceil(2 /
(1 - rand))就聚拢很明显 var step = Math.ceil(1 / (1 - rand)); var
arr = []; for (var i=0; i<step; i  ) { arr.push(Math.random());
} return Math.min.apply(null, arr); };

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a6436b2b195965046-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4a6436b2b195965046-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f4a6436b2b195965046-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4a6436b2b195965046-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f4a6436b2b195965046-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4a6436b2b195965046-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f4a6436b2b195965046-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4a6436b2b195965046-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f4a6436b2b195965046-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4a6436b2b195965046-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f4a6436b2b195965046-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4a6436b2b195965046-12">
12
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a6436b2b195965046-1" class="crayon-line">
var getMinRandom = function() {
</div>
<div id="crayon-5b8f4a6436b2b195965046-2" class="crayon-line crayon-striped-line">
    var rand = Math.random();
</div>
<div id="crayon-5b8f4a6436b2b195965046-3" class="crayon-line">
    // step的大小决定了星星靠近地球的聚拢程度,
</div>
<div id="crayon-5b8f4a6436b2b195965046-4" class="crayon-line crayon-striped-line">
    // step = Math.ceil(2 / (1 - rand))就聚拢很明显
</div>
<div id="crayon-5b8f4a6436b2b195965046-5" class="crayon-line">
    var step = Math.ceil(1 / (1 - rand));
</div>
<div id="crayon-5b8f4a6436b2b195965046-6" class="crayon-line crayon-striped-line">
    var arr = [];
</div>
<div id="crayon-5b8f4a6436b2b195965046-7" class="crayon-line">
    for (var i=0; i&lt;step; i  ) {
</div>
<div id="crayon-5b8f4a6436b2b195965046-8" class="crayon-line crayon-striped-line">
        arr.push(Math.random());
</div>
<div id="crayon-5b8f4a6436b2b195965046-9" class="crayon-line">
    }
</div>
<div id="crayon-5b8f4a6436b2b195965046-10" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f4a6436b2b195965046-11" class="crayon-line">
    return Math.min.apply(null, arr);       
</div>
<div id="crayon-5b8f4a6436b2b195965046-12" class="crayon-line crayon-striped-line">
};
</div>
</div></td>
</tr>
</tbody>
</table>

很大概率会返回一个数值偏小的值,于是,就可以有“月明星稀”的分布效果了。
  1. 圆弧轨迹
    实质上相当粗略,大家套用高级中学时候学的圆方程式就可以了,如投注释截图所述:
    图片 2那下标题就总结了,已知a,b, 求y相对于x的函数表达式……
canvas画布的连绵不断绘制

在之前小编们都以采取机械漏刻举办绘图,可是今后提议利用requestAnimationFrame来贯彻刷新绘制,为了向下包容,大家一般会做类似下边的管理:

// requestAnimationFrame的向下兼容处理
if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(fn) {
        setTimeout(fn, 17);
    };
}</pre>

只假使同一个职位不断刷新,大家来看的依旧静止不动的效果,还差三个活动变量。

本课早先前,要清楚canvas的创建,怎么着绘制直线,多边形,弧线,圆。

三、canvas图形效果之雪花噪点效果

图片 3

图是死的,效果这里也是死的,但并不要紧碍大家零距离围观,您能够狠狠地点击这里:canvas落成的噪点效果demo

是因为此地是静态的,所以但从这点来看,就像是比上边星空简单。可是,借使单纯看绘制壹帧,那这里的噪点要比上面包车型地铁星空要艰辛些,最大的难题在于对品质的把控。

诸如此类说吗,下面的星空,总共最多就400个点(红棕的星星点点),但是,这里的噪点,举个例子,demo中画布大小(那我的电话比如)是一九壹8*500,在那之中,噪点大小是1像素*一像素,总共就有九四千0个绘制点,显著跟400个点完全不是3个数额级的,假设我们真正三个3个制图下来,分明,就连Chrome这么牛步的浏览器也会认为到分明的卡顿,如何优化怎样绘制呢?

那就是本例子落成的困难:

  1. 数据与特性
    本身这里是如此管理的,即使最终的噪点大小是一九一9*500,可是,大家实在是由N块300*150的小的像瓷砖一样的小方块拼起来的。话句话说,作者实际只绘制了45000个点,比950000明了要小了20倍还不止。那样,既满意了效果,又保障了品质。

现实达成原理为:

  1. 创立1个canvas,绘制三个300*150随意噪点图形;
  2. 把那边具有噪点的canvas以画布格局在绘制到页面上的大canvas上;

说得canvas绘图,不得不提一下异平日用的2个drawImage()措施,语法如下:

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

1
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

依次参数暗中提示为(英特网的讲述都是直译,很隐晦,小编那边再次陈述了下):

参数 描述
img 用来被绘制的图像、画布或视频。
sx 可选。img被绘制区域的起始左上x坐标。
sy 可选。img被绘制区域的起始左上y坐标。
swidth 可选。img被绘制区域的宽度。
sheight 可选。img被绘制区域的高度。
x 画布上放置img的起始x坐标。
y 画布上放置img的起始y坐标。
width 可选。画布上放置img提供的宽度。(伸展或缩小图像)
height 可选。画布上放置img提供的高度。(伸展或缩小图像)

本例的小的噪点区块正是透过drawImage()方法被平铺到大的canvas成分上的。

内需叁个平移坐标变量

设若大家就有2个圆形圈,同时ball.x就代表此圆圈圈的品位坐标地方,则,代码套路能够是那般:

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

// 坐标变量
var x = 0;

// 绘制方法
var draw = function () {
    ball.x = x;
};

// 画布渲染
var render = function () {
    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 位置变化
    x  ;

    // 绘制
    draw();

    // 继续渲染
    requestAnimationFrame(render);
};

render();

可是,实际项目中,很少,就唯有3个圆形圈,而是一大波的圈子圈,此时地点的变量设置就能够不符合规律,哪有那么多变量让您设置呢!平时有三种管理方法,1种是变量管理,有3个大变量,变量里面放的都以小变量,类似于[{},{},{},...]那种数据结构;还有一种是走实例化对象,变量存款和储蓄在实例对象上,很醒目,后边1种对变量的管制要特别便于和轻易掌握。

愈来愈错综复杂的动画片进度,还要等绘制学完事后,本事拿下。

4、canvas图形效果之平流雾缭绕效果

图片 4

图是死的,效果是活的,IE玖 浏览器下,您能够狠狠地点击这里:canvas达成的平流雾缭绕效果demo

本例子,效果看上去要更酷一些,实际上,从技巧层面讲,跟下边包车型大巴星空旋转效果差不多如出1辙,或许还要比星空更简短一些,因为其移动轨迹直来直往,无需转圈圈。

那干什么看起来更酷呢,主要在于认为混合雾很难去模拟。

没错,上坡雾确实很难用代码直接绘制出来,实际上,这里的气团雾,是三个png图片,是运用画笔在PS里绘制导出来的。

旋转星空的例子,大家是使用canvas的fillRect方法绘制了点滴,而本例子,则是选拔方面提到的drawImage()措施把蒸发雾图片绘制进来了。

其它的位移啊,反射率变化什么的,原理都是近乎。

本例子的难处重要在于模拟是不是丰裕真实:

  1. 高处不胜寒
    越往上,气团雾越淡,实际上正是越接近上方,发光度越低;
// 越靠近边缘,透明度越低 // 纵向透明度变化要比横向的明显 this.alpha
= (1 - Math.abs(canvasWidth*0.5 - this.x) / canvasWidth) * (0.7 -
Math.abs(canvasHeight*0.5 - this.y) / canvasHeight);

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a6436b3d419634939-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4a6436b3d419634939-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f4a6436b3d419634939-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a6436b3d419634939-1" class="crayon-line">
// 越靠近边缘,透明度越低
</div>
<div id="crayon-5b8f4a6436b3d419634939-2" class="crayon-line crayon-striped-line">
// 纵向透明度变化要比横向的明显
</div>
<div id="crayon-5b8f4a6436b3d419634939-3" class="crayon-line">
this.alpha = (1 - Math.abs(canvasWidth*0.5 - this.x) / canvasWidth) * (0.7 - Math.abs(canvasHeight*0.5 - this.y) / canvasHeight);
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 缭绕
    所谓“缭绕”,正是活动看似不持有规律性。要清楚,凡事有轨道有套路的移位都是有规律性地,你说那混合雾上上下下,左左右右运动太过度规律,效果就能回落,不过,真的未有规律又不佳通过代码调节移动轨迹。因而,为了搞到八个近似缭绕效果的移位函数,还真是烧了众多脑细胞。
实例对象管理canvas图形颗粒变量
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

// 存储实例
var store = {};

// 实例方法
var Ball = function () {
    // 随机x坐标也就是横坐标,以及变化量moveX,以及半径r
    this.x = Math.random() * canvas.width;
    this.moveX = Math.random();
    this.r = 5   5 * Math.random();

    this.draw = function () {
       // 根据此时x位置重新绘制圆圈圈
       // ...
    };
};

// 假设10个圆圈圈
for (var indexBall = 0; indexBall < 10; indexBall  = 1) {
    store[indexBall] = new Ball();
}

// 绘制画布上10个圆圈圈
var draw = function () {
    for (var index in store) {
        // 位置变化
        store[index].x  = store[index].moveX;
        if (store[index].x > canvas.width) {
            // 移动到画布外部时候从左侧开始继续位移
            store[index].x = -2 * store[index].r;
        }
        // 根据新位置绘制圆圈圈
        store[index].draw();
    }
};

// 画布渲染
var render = function () {
    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制画布上所有的圆圈圈
    draw();

    // 继续渲染
    requestAnimationFrame(render);
};

render();

各个接口1个小的示范性程序,启示怎么样将这几个接口使用在切实地工作的条件中。

本文由新浦京81707con发布于首页,转载请注明出处:噪点与烟雾效果,炫丽的倒计时效果

关键词: 新浦京81707con HTML5 HTML&&HTML5 HTML5 爱心鱼

上一篇:最受欢迎的7个前端UI框架,最流行的5个前端框架

下一篇:没有了