最近看了很多牛的动画，想想自己的canvas的确很菜。

公式在那里，但是不是太会套。找demo发现都是很难的

于是找了个简单的效果

圆环从中间扩散的效果

关键是 globalCompositeOperation合成操作，只留下重叠的部分

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>圆形扩散</title>

    <style>

        body {

            overflow: hidden;

            background: #000;

        }

        body,

        html {

            height: 100%;

            width: 100%;

            margin: 0;

            padding: 0;

        }

    </style>

</head>

<body>

    <canvas id="canvas"></canvas>

</body>

<script type="text/javascript">

var oAnim=document.getElementById('canvas');

var context = oAnim.getContext("2d");

var radius=0

    function drawCircle(){

        context.beginPath();

        render(radius);

        context.arc(50,50,radius,0,Math.PI * 2);

        context.closePath();

        context.lineWidth=2;

        context.strokeStyle='rgba(250,250,50,1)';

        context.stroke();

        radius +=0.5;//每帧半径增加0.5

            if(radius > 20){

                radius=0;

            }

    }

    function render(x) {

    //默认值为source-over,覆盖原图上面，效果像z-index:999
    var prev = context.globalCompositeOperation;

    //只显示canvas上原图像的重叠部分
    context.globalCompositeOperation = 'destination-in';

    //设置主canvas的绘制透明度，圆圈中间的浅黄色部分
    context.globalAlpha = 0.95;
  
    //这一步目的是将canvas上的图像变的透明
    context.fillRect(0,0,40*x,40*x);

    //在原图像上重叠新图像
    context.globalCompositeOperation = prev;
    //下面代用的drawcricle方法，圆圈覆盖在正方形上

};

    //在主canvas上画新圆

    setInterval(function(){

            drawCircle();

        },20);

</script>

</html>

canvas扩散圆环的更多相关文章

  1. 第165天：canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

  2. CSS3进度条 和 HTML5 Canvas画圆环

    看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...

  3. canvas画圆环

    <!DOCTYPE html><html> <head> <title> </title> <meta http-equiv=&quo ...

  4. canvas画圆环%显示

    我: JS代码:  function circleProgress(id,value,average){  var canvas = document.getElementById(id);  var ...

  5. canvas 实现圆环效果

    var race = document.getElementById('race'); var cxt = race.getContext('2d'); var ang = 0; var speed ...

  6. canvas绘制圆环

  7. 浅谈一下关于使用css3来制作圆环进度条

    最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...

  8. canvas实现有递增动画的环形进度条

    哈?标题不知道啥意思? 老规矩,直接看图! 效果如下: 高清大图! 码农多年,老眼昏花,动图看不清?!那就看静态截图!!! 不同分值效果如下:          看完了卖家秀,我们来看产品的制作过程吧 ...

  9. 自定义View绘制简单的圆环的实现

    package com.loaderman.mywave; import android.content.Context; import android.graphics.Canvas; import ...

随机推荐

  1. 宕机不等于关机，阴魂不散的vm

    今天早上刚到公司,就发现研发环境的机器连不上了. 公司研发环境的部署比较简单,物理机上装VMware Esxi 6 ,然后在esxi上装虚机. 检查发现:esxi ping不通,客户端也连不上:物理机 ...

  2. UE4中Component和Subobject的区别

    Component是Subobject的一种. 其中, Subobject是一种Outer不是一个UPackage的UObject,而UPackage是整个层次结构中的最上层,指向磁盘上的一个.uas ...

  3. spoj gss1 gss3

    传送门 gss1 gss3 spoj gss系列=最大字段和套餐 gss1就是gss3的无单点修改版 有区间查询和单点修改,考虑用线段树维护 我们要维护区间权值和\(s\),区间最大前缀和\(xl\) ...

  4. Flask最强攻略 - 跟DragonFire学Flask - 第八篇 实例化Flask的参数 及 对app的配置

    Flask 是一个非常灵活且短小精干的web框架 , 那么灵活性从什么地方体现呢? 有一个神奇的东西叫 Flask配置 , 这个东西怎么用呢? 它能给我们带来怎么样的方便呢? 首先展示一下: from ...

  5. Android ThreadPool

    在Android开发中,如果我们要执行某个耗时任务,一般都会考虑开启一个线程去处理. 一个线程run方法执行完毕后,才算真正结束:但是,这只是结束,并没有被回收:会一直闲置在那里,等待GC去回收.所以 ...

  6. Django开发笔记三

    Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.基于类的方式重写登录:views.py: from ...

  7. Django 自定义过滤器和模板标签

    前提:自定义模板标签和过滤器必须位于Django的某个应用中,这个应用可以包含一个templatetags目录, 和models.py views.py 处于同一级目录.若这个templatetags ...

  8. MR数据生成工具指向目录

    mrDataTidy_SaveTwoDays.jar 原始路径 :D:\太原MR数据\一天数据整理 目标路径 : D:\MR现场数据整理\保存两天_整理后数据 例如 当前时间:2017-5-17 10 ...

  9. mysql之 innobackupex备份+binlog日志的完全恢复【转】

    前言: MySQL的完全恢复,我们可以借助于完整的 备份+binlog 来将数据库恢复到故障点. 备份可以是热备与逻辑备份(mysqldump),只要备份与binlog是完整的,都可以实现完全恢复. ...

  10. eclipse自动添加注释

    自动添加注释 快捷键:alt shift jwindows-->preference Java-->Code Style-->Code Templates code-->new ...