<!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. 多线程09-Lock和Condition

    1.概念 Lock比传统线程模型中的synchronized方式更加面向对象,与生活中的锁类似,锁本身也应该是一个对象.两个线程执行的代码片段要实现同步互斥的效果,它们必须用同一个Lock对象. 2. ...

  2. WDCP一些常用的一健安装包可选安装组件

    为有更好的性能,也为更简洁的系统,一些不是常用或不是基本的功能,都将做为可选的安装组件需要用到的就安装 memcache的安装 wget -c http://down.wdlinux.cn/in/me ...

  3. 浅谈C51内存优化

    对 51 单片机内存的认识,很多人有误解,最常见的是以下两种 超过变量128后必须使用compact模式编译,实际的情况是只要内存占用量不超过 256.0 就可以用 small 模式编译 128以上的 ...

  4. java日期int和String互转

    /** * 时间unix转换 * @param timestampString * @return */ public static String TimeStampDate(String times ...

  5. 什么是Ajax? （转载于疯狂客的BLOG）

    Ajax的定义 Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术. Ajax包括: XHTML和CSS,使用文档对象模型(Document Obje ...

  6. HDU_2042——递归反推

    Problem Description 你活的不容易,我活的不容易,他活的也不容易.不过,如果你看了下面的故事,就会知道,有位老汉比你还不容易.重庆市郊黄泥板村的徐老汉(大号徐东海,简称XDH)这两年 ...

  7. mirantis fuel

    使用mirantis公司的openstack部署工具--fuel,迅速部署体验openStack云管理软件; 1,使用virtualbox虚拟化工具(此工具在此使用主要是为了简化新建虚机的网络规划,f ...

  8. Linux grep 命令中的正则表达式详解

    在 Linux .类 Unix 系统中我该如何使用 Grep 命令的正则表达式呢? Linux 附带有 GNU grep 命令工具,它支持扩展正则表达式(extended regular expres ...

  9. 并发队列之：BlockingQueue和ConcurrentLinkedQueue

    一.并行和并发区别: 并行:是指两者同时执行一件事.比如赛跑,两个人都在不停的往前跑: 并发:是指资源有限的情况下,两者交替轮流使用资源.比如一段路(单核CPU资源)同时只能过一个人,A走一段后,让给 ...

  10. 【KMP+DP】Count the string

    KMP算法的综合练习 DP很久没写搞了半天才明白.本题结合Next[]的意义以及动态规划考察对KMP算法的掌握. Problem Description It is well known that A ...