<!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. hibernate自连接--典型的oracle自带emp实现

    用S2SH三大框架整合,用了oracle自带的表emp,实现了自连接. pojo类: public class Emp implements java.io.Serializable { // Fie ...

  2. 使用keras时出现 `pydot` failed to call GraphViz的解决办法

    问题来源于使用了 keras.utils.plot_model,报错内容为: 2018-08-29 08:58:21.937037: I tensorflow/core/platform/cpu_fe ...

  3. 洛谷——P2009 跑步

    P2009 跑步 题目背景 跑步是一项有意思的运动,尤其是可以开发人的脑筋.常神牛很喜欢跑步. 题目描述 常神牛跑步的场地是一个多边形(边数≤20,每个顶点用英文大写字母表示),并且在这个多边形内部, ...

  4. HZAU 1207 Candies（线段树区间查询 区间修改）

    [题目链接]http://acm.hzau.edu.cn/problem.php?id=1207 [题意]给你一个字符串,然后两种操作:1,将区间L,R更新为A或者B,2,询问区间L,R最长的连续的B ...

  5. Python开发基础-Day8-装饰器扩展和迭代器

    wraps模块 让原函数保留原来的说明信息 import time import random from functools import wraps def auth(func): '''auth ...

  6. xUtils 中的 BitmapUtils

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha xUtils框架,包括BitmapUtils.DbUtils.ViewUtils和Htt ...

  7. [BZOJ2595]游览计划

    斯坦纳树居然不是数据结构... 斯坦纳树应该是类似最小生成树的问题,只不过它允许增加额外的点 比如这道题就是找关于景点的最小生成树,但还要付出最小的代价,加一些额外的格子把景点都连起来 套路是设$f_ ...

  8. 【递推】【DFS】【枚举】Gym - 101246C - Explode 'Em All

    网格里放了一些石块,一个炸弹能炸开其所在的行和列.问炸光石块至少要几个炸弹. 枚举不炸开的行数,则可以得出还要炸开几列. 为了不让复杂度爆炸,需要两个优化. 先是递推预处理出f(i)表示i的二进制位中 ...

  9. python 多继承详解

    class A(object): # A must be new-style class def __init__(self): print "enter A" print &qu ...

  10. MYSQL复习笔记10-连接

    Date: 20140219Auth: Jin 一.介绍连接是二元运算,可以对两个表或多个表进行查询.T-SQL中分两大类,一是符合SQL标准的连接谓词表示形式,二是T-SQL扩展的使用关键字JOIN ...