<!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. Java 创建线程的方法

    为了偷懒少敲几个字这里我写了一个Util类: package test; public class Util { static void println() {System.out.println() ...

  2. Linux含交互的自动登录脚本

    近来经常要通过ssh登录服务器,每次输入命令和密码很麻烦,查资料发现有两种解决,一种是本地创建密钥直接登录,另一种是写个脚本. 这里介绍第二种方法,第一种资料也很多,但是觉得没啥意思. 先上脚本: # ...

  3. oracle substr

    SUBSTR( string, start_position [, length ] ) Parameters or Arguments string The source string. start ...

  4. [BZOJ1913][APIO2010]信号覆盖(计算几何+计数)

    1913: [Apio2010]signaling 信号覆盖 Time Limit: 20 Sec  Memory Limit: 64 MBSubmit: 1658  Solved: 672[Subm ...

  5. BZOJ 4589 Hard Nim（FWT+博弈论+快速幂）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4589 [题目大意] 有n堆石子,每堆都是m以内的质数,请问后手必胜的局面有几种 [题解 ...

  6. 【线段树（单点修改，区间求和）】HDU1166 - 敌军布阵

    hdu1166 敌兵布阵,单点修改,区间求和. [ATTENTION]MAXN要开成节点数的4倍,开得不够会提示TLE. #include<iostream> #include<cs ...

  7. mybatis异常: invalid comparison: java.util.ArrayList and java.lang.String] with root cause

    mybatis中使用动态sql,报错: invalid comparison: java.util.ArrayList and java.lang.String] with root cause 是由 ...

  8. Mock -- 数据模拟

    作者:张云龙链接:https://www.zhihu.com/question/35436669/answer/62753889来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. nginx服务器URL无法自动添加index.php

    请教个nginx问题,添加try_files $uri $uri/index.php /index.php?$query_string;,类似www.mydomain.com/admin这样的URL可 ...

  10. 虚拟机选择配置:解决tomcat内存溢出

    用于解决java.tomcat内存溢出:-server -XX:PermSize=128M -XX:MaxPermSize=256m