canvas--画宇宙
<!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--画宇宙的更多相关文章
- 使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
- canvas 画圈 demo
html代码: <canvas id="clickCanvas2" width="180" height="180" data-to ...
- 踩个猴尾不容易啊 Canvas画个猴子
踩个猴尾不容易啊 Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- canvas画随机闪烁的星星
canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...
- canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Canvas画椭圆的方法
虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生 oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...
- 深夜,用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- 樱花的季节,教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...
- HTML5之Canvas画圆形
HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...
- HTML5之Canvas画正方形
HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...
随机推荐
- Nagios设置只监控不报警
设置全部监控项都开启邮件报警: vim /usr/local/nagios/etc/nagios.cfg 设置 enable_notifications=1 1为开启,0为关闭 如个别监 ...
- Cacti监控Linux主机
1 要监视一台Linux主机,需要在被监控的主机上安装net-snmp相关软件包,CentOS安装可使用“yum -y install net-snmp”命令:# yum -y install net ...
- 'Invalid update: invalid number of rows in section xx. The number of rows contained in an existing section after the update (xxx)...
'Invalid update: invalid number of rows in section 5. The number of rows contained in an existing s ...
- Fiddler 网页采集抓包利器
最近这段时间,网页采集方面的工作做得比较多.用curl技术开发了一个微信文章聚合类产品,把抓取到的数据转换成json格式,并在android端调用json数据接口加以显示:基于weiphp做了一个掌上 ...
- php获取mac用于网站绑定服务器
php获取mac用于网站绑定服务器 <?php class GetMacAddr{ var $return_array = array(); // 返回带有MAC地址的字串数组 var $mac ...
- 以下是jQuery和JavaScript实现相同操作的等价代码。
选择元素 Javascript代码 1.// jQuery 2.var els = $('.el'); 3. 4.// 原生方法 5.var els = document.queryS ...
- Max Min Middle
/*三者中的中间数*/#define Max(a,b) (a>b?a:b) #define Min(a,b) (a<b?a:b) int MiddleOfThree(int a, int ...
- printf格式输出总结
#include<stdio.h> #include<string.h> int main() { ]; ; floa ...
- js中的|| 与 &&
a && b : 将a, b转换为Boolean类型, 再执行逻辑与, true返回b, false返回aa || b : 将a, b转换为Boolean类型, 再执行逻辑或, tru ...
- xdebug使用说明
常用配置 xdebug.var_display_max_children整数类型,默认值128.用于控制通过xdebug_var_dump(),var_dump()方法时显示数组中子数组的个数或对象中 ...