<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body onload="draw()">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
<script>
function draw(){
var canvas=document.getElementById('canvas');
var context=canvas.getContext("2d");
var g1=context.createLinearGradient(0,0,0,200);
g1.addColorStop(0,"rgb(22,22,5)");
g1.addColorStop(1,"rgb(45,230,7)");
context.fillStyle=g1;
context.fillRect(0,0,500,500);
var g2=context.createLinearGradient(0,0,300,300);
g2.addColorStop(0,'rgba(0,0,255,0.5)');
g2.addColorStop(1,'rgba(255,45,6,0.5)');
for(var i=0;i<10;i++)
{
context.beginPath();
context.fillStyle=g2;
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);////6个参数分别是 起点横坐标，起点纵坐标，圆的半径，起始弧度，结束弧度（2PI刚好是360度），是否顺时针
context.closePath();
context.fill();
}
}
</script>
</html>

canvas--画宇宙的更多相关文章

  1. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  2. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  3. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  4. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  5. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

  7. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  8. 樱花的季节，教大家用canvas画出飞舞的樱花树

    又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...

  9. HTML5之Canvas画圆形

    HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...

  10. HTML5之Canvas画正方形

    HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

随机推荐

  1. ajaxfileupload

                 }         }                              setTimeout(                              }, s. ...

  2. WindowManager

    我们Android平台是一个又一个的Activity组成的,每一个Activity有一个或者多个View构成.所以说,当我们想显示一个界面的时候,我们首先想到的是建立一个Activity,然后所有的操 ...

  3. linux初识-02常用命令

    文件目录操作命令 ls 现实文件和目录列表 ls -l 列出文件的详细信息 ls -a 列出当前目录所有文件 包括隐藏的文件 mkdir 创建目录 -p 父目录不存在的情况下先生成父目录 cd 切换目 ...

  4. web安全：xss && csrf

    首先在user.php文件中去除黑名单的第一行标签,在白名单中添加<script>E1:csrf攻击zoobarcsrf:cross-site request forgery    跨站伪 ...

  5. testng，soket write error错误

    网上解决手段:  testng 工程报错java.net.SocketException SocketException: Software caused connection abort · Iss ...

  6. Git之detached HEAD

    今天遇到了和CSDN上博主相同的问题,就是使用git -branch -a 发现自己处于一个零时的分支上.这篇博文写的不错,转载记录一下. 转载:http://blog.csdn.net/lili62 ...

  7. BZOJ3397: [Usaco2009 Feb]Surround the Islands 环岛篱笆

    3397: [Usaco2009 Feb]Surround the Islands 环岛篱笆 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 11  So ...

  8. Android SDK下载和更新失败的解决方法！！！

    Failed to fetch URL http://dl-ssl.google.com/android/repository/addons_list-1.xml. 据说dl-ssl.google.c ...

  9. cocos2d-x 几何绘制： DrawingPrimitives 和 CCDrawNode

    在看书的时候只提到了DrawingPrimitives,然后我去搜索这个类,结果没搜到.心想难道是类名改了,那我搜方法名吧,搜了下DrawLine,果然被我搜到了.结果发现原来这些各方法都是全局函数, ...

  10. Android开发中Handler的经典总结--转载至网络

    一.Handler的定义: 主要接受子线程发送的数据, 并用此数据配合主线程更新UI. 解释:当应用程序启动时,Android首先会开启一个主线程 (也就是UI线程) , 主线程为管理界面中的UI控件 ...