<!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 日期validate

    public static boolean isValidDate(String str) { boolean convertSuccess=true; // 指定日期格式为四位年/两位月份/两位日期 ...

  2. ANY和SOME 运算符

    在SQL中ANY和SOME是同义词,所以下面介绍的时候只使用ANY,SOME的用法和功能和ANY一模一样.和IN运算符不同,ANY必须和其他的比较运算符共同使用,而且必须将比较运算符放在ANY 关键字 ...

  3. [Codeforces-div.1 809C] Find a car

    [Codeforces-div.1 809C] Find a car 试题分析 莫名结论:\(a_{i,j}=(i-1) xor (j-1) +1\) 然后分成\(i\space xor\space ...

  4. [UOJ409]Highway Tolls

    题意:交互题,给定一个简单无向图和$A,B(1\leq A\lt B)$,你可以对每条边指定其边权为$A$或$B$后通过交互库询问$S\rightarrow T$的最短路($S,T$在程序运行之前已经 ...

  5. Problem E: 12306

    #include <stdio.h> struct student{ int n; int m;}; int main(void) { int T; int k,g,i,j; ],max; ...

  6. CDOJ 1280 772002画马尾 每周一题 div1 矩阵快速幂

    772002画马尾 题目连接: http://acm.uestc.edu.cn/#/problem/show/1280 Description 众所周知772002很喜欢马尾,所以他决定画几幅马尾送给 ...

  7. Codeforces Round #127 (Div. 1) D. Brand New Problem 暴力dp

    D. Brand New Problem 题目连接: http://www.codeforces.com/contest/201/problem/D Description A widely know ...

  8. python一个简单的爬虫测试

    之前稍微学了一点python,后来一直都没用,今天稍微做一个小爬虫试一试.. 参考了: http://www.cnblogs.com/fnng/p/3576154.html 太久没用了,都忘记pych ...

  9. HDU 4664 Triangulation（2013多校6 1010题，博弈）

    Triangulation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...

  10. 也来讲REST、SOAP

    在GIS网络开发过程中不可避免的的会涉及到REST(Representational State Transfer)的服务.自从Roy Fielding博士在2000年他的博士论文中提出REST风格的 ...