<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <script type="text/javascript">

             function draw(id){

                 var convas = document.getElementById(id);

                 if(canvas == null){

                     return false;

                 }

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

                 context.fillStyle = '#eeeeff';

                 context.fillRect(0,0,400,300);

                 for(var i=0;i<10;i++){

                     context.beginPath();

                     context.arc(i*25,i*25,i*10,0,Math.PI*2,true);

                     context.closePath();

                     context.fillStyle = 'rgba(255,0,0,0.25)';

                     context.fill();

                 }

             }

         </script>

     </head>

     <body onload="draw('canvas');">

         <canvas id="canvas" width="400" height="300"></canvas>

     </body>

 </html>

canvas光晕的更多相关文章

  1. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

  2. 带着canvas去流浪系列之九 粒子动画【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  3. 带着canvas去流浪系列之九 粒子动画

    [摘要] canvas实现粒子动画 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 粒子特效 粒子特效一般指密集点阵效果,它并不是canvas独有 ...

  4. 【带着canvas去流浪（9）】粒子动画

    目录 一. 粒子特效 二. 开发中遇到的问题 2.1 卡顿 2.2 轨迹 2.3 复位 2.4 防护层 2.5 二维向量类 三. 实现讲解 3.1 粒子类的update方法 3.2 粒子群的绘制 3. ...

  5. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  6. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  7. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  8. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  9. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

随机推荐

  1. 携带结果的任务 Callable 与 Future

    Executor框架使用Runnable作为其基本任务表示形式.Runnable是一种有很大局限的抽象,它不能返回一个值或者抛出一个受检查的异常. 但是许多任务实际上都是存在延迟的计算,比如执行数据库 ...

  2. Linux系统运维问题收集

    [Q1]如何修改系统时间? #修改成 2016-11-23 11:10:50 A: date -s 11/23/2016 date -s 11:10:50 date -R   #查看当前时区和时间 [ ...

  3. <四边形不等式优化>[NOI1995]石子合并

    留个坑 挺套路的 明天来写个总结 #include<cstdio> #include<algorithm> inline int read() { int x = 0,f = ...

  4. [BZOJ4815][CQOI2017]小Q的表格(莫比乌斯反演)

    4815: [Cqoi2017]小Q的表格 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 832  Solved: 342[Submit][Statu ...

  5. 【分块】【树套树】bzoj2141 排队

    考虑暴力更新的情况,设swap的是L,R位置的数.swap之后的逆序对数应该等于:之前的逆序对数+[L+1,R-1]中比 L位置的数 大的数的个数-[L+1,R-1]中比 L位置的数 小的数的个数-[ ...

  6. Java学习笔记（11）

    自定义异常类: 自定义异常类的步骤:自定义一个类继承Exception即可 public class CustomClass { public static void main(String[] ar ...

  7. InetAddress之域名解析

    1. getByName public static InetAddress getByName(String host) throws UnknownHostException { return I ...

  8. [转]mybatis 的简单使用

      需要用到的包:(这里只是其中一个版本,其他的百度) mysql-connector-java-5.1.6-bin mybatis-3.2.2 先看项目目录: 配置文件mybatisconfig.x ...

  9. NHibernate官方文档中文版--拦截器和事件（Interceptors and events）

    对于应用程序来说,能够对NHibernate内部发生的事件做出响应式很有用的.这能够有助于实现一些类的功能或者扩展NHibernate的功能. 拦截器 IInterceptor接口提供了应用程序ses ...

  10. errno错误码及含义(中文)

    /usr/include/asm/errno.h #define EPERM 1 /* Operation not permitted */操作不允许 #define ENOENT 2 /* No s ...