最近看了很多牛的动画，想想自己的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. 如何使用无线连接来使Android调试手机

    进入Android Studio.(我的是2.2版本) File->Setting->Plugins Browse repositories... 搜索 ADB WIFI 并安装 重启An ...

  2. 03-依赖倒置原则(DIP)

    1. 背景 类A是高层代码,类A直接依赖B,如果要将类A改为还要依赖C,则必须修改类A的代码来实现.在实际场景中,类A是高层,负责业务逻辑,类B和类C是低层模块,负责基本的原子操作,假如修改A,会给程 ...

  3. Python异常处理和进程线程-day09

    写在前面 上课第九天,打卡: 最坏的结果,不过是大器晚成: 一.异常处理 - 1.语法错误导致的异常 - 这种错误,根本过不了python解释器的语法检测,必须在程序运行前就修正: - 2.逻辑上的异 ...

  4. SAP笔记---非-现存任务/请求XXX上的请求锁定

    不管在SAP中的哪个系统在点击修改程序时都有可能出现以下图中的报错: 已找到解决办法,步骤如下: 1,se11中查看tlock表找到以上提到的请求号记录: 2,进入se16n,输入请求号,在事务代码输 ...

  5. [JLOI2015]装备购买 （高斯消元）

    [JLOI2015]装备购买 \(solution:\) 首先这道题的题面已经非常清晰的告诉我们这就是线性空间高斯消元的一道题(可以用某些装备来表示另一件装备,这已经不能再明显了),只是这道题要求我们 ...

  6. C语言文件操作详解

    C语言中没有输入输出语句,所有的输入输出功能都用 ANSI C提供的一组标准库函数来实现.文件操作标准库函数有: 文件的打开操作 fopen 打开一个文件 文件的关闭操作 fclose 关闭一个文件 ...

  7. A - 最大子矩阵 HYSBZ - 1084 （DP）

    题目链接:https://cn.vjudge.net/contest/281963#problem/A 题目大意:中文题目 具体思路:观察到m<=2,所以我们可以对两种情况进行单独讨论,当m== ...

  8. Android中实现延时执行操作的几种方法

    1.使用线程的休眠实现延时操作 new Thread() { @Override public void run() { super.run(); Thread.sleep(3000);//休眠3秒 ...

  9. 从Nexus私服下载和上传资源（一）

    从私服中下载资源 首先要明确将资源下载到哪里 找到maven 配置文件settings.xml 文件,添加如下配置:1.添加镜像配置:将所有访问外网仓库的请求指向私服: <mirror> ...

  10. Pytorch 之 backward

    首先看这个自动求导的参数: grad_variables:形状与variable一致,对于y.backward(),grad_variables相当于链式法则dz/dx=dz/dy × dy/dx 中 ...