<!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. CocoaPods报错：The dependency `xxx` is not used in any concrete target

    官网是这样给推荐的: 在创建Podfile的时候,用这种格式使用, platform :ios, '8.0' use_frameworks! target 'MyApp' do pod 'AFNetw ...

  2. QT5-控件-QLineEdit-文本输入控件，用来输入密码什么的还不错，可以和Linux登录一样不移动光标哦

    #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QLineEdit> #i ...

  3. Qt5遇到的问题

    好久没用Qt了,今天又重新安装了一个,结果遇到不少问题 本机环境:VS2015,Qt5.7 装好后,就新建工程测试了一下,结果无法编译,提示 :-1: error: cannot open C:\Us ...

  4. 取消IDEA中光标“指哪打哪”模式

    很简单,在Settings->Editor里面去掉Allow placement of caret after end of line

  5. javascript 倒计时代码

    <script language="javascript" type="text/javascript"> var interval = 1000; ...

  6. php处理字符串格式的计算公式

    有时候我们对每一种产品都有一个提成公式,而这个计算提成的公式是以字符串格式存在表中的 当我们用这个计算公式时,他并不像我们写的:$a=2+3*5;这样简单的能计算出结果,而它是个字符串 所以,我们就必 ...

  7. Swift—析构函数-备

    与构造过程相反,实例最后释放的时候,需要清除一些资源,这个过程就是析构过程.在析构过程中也会调用一种特殊的方法deinit,称为析构函数.析构函数deinit没有返回值,也没有参数,也不需要参数的小括 ...

  8. Facebook 正式开源其大数据查询引擎 Presto

    Facebook 正式宣布开源 Presto —— 数据查询引擎,可对250PB以上的数据进行快速地交互式分析.该项目始于 2012 年秋季开始开发,目前该项目已经在超过 1000 名 Faceboo ...

  9. wifi钓鱼教程

    关于 <原创>想钓鱼必须还要有好竿wifi学习教程+软件下载地址修正 因为最近网盘维护 导致资源无法下载 今天早上开通下载服务了大家可以放心下载. 蹭网要低调不要炫耀 软件介绍:Wires ...

  10. 一个正整数N,拆成任意个正整数之和,怎样使这些数的乘积最大

    网上看到了如标题所示的题目,就开始想如果用程序来算的话,那么它的算法是怎样的. 自己想了半天,第一感觉要用递归, 如先算出 当 n=1 max=1 当 n=2 max=1 当 n=3 max=2 .. ...