html5 canvas 径向渐变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>径向渐变</title>
<script src="js/modernizr.js"></script>
</head> <body>
<script type="text/javascript">
window.addEventListener('load',eventWindowLoaded,false);
function eventWindowLoaded(){
canvasApp();
}
function canvasSupport(){
return Modernizr.canvas;
}
function canvasApp(){
if(!canvasSupport()){
return;
}else{
var theCanvas = document.getElementById('canvas')
var context = theCanvas.getContext("2d") }
drawScreen();
function drawScreen(){
var gr = context.createRadialGradient(50,50,25,50,50,100);
//添加颜色端点
gr.addColorStop(0,'rgb(255,0,0)');
gr.addColorStop(.5,'rgb(0,255,0)');
gr.addColorStop(1,'rgb(0,0,255)');
//应用fillStyle生成渐变
context.fillStyle = gr;
context.fillRect(0,0,200,200); }
}
</script>
<canvas id="canvas" width="500" height="500">
你的浏览器无法使用canvas
小白童鞋；你的支持是我最大的快乐！！
</canvas>
</body>
</html>
context.createRadialGradient(50,50,25,50,50,100);
6个参数定义2个圆的圆心和半径
第一个圆是开始圈
第二个圆是结束圈
第一个圆位于（50,50）半径25
第二个元位于（50,50）半径为100
最后不好意思我实在不想形容这个奇怪的造型了，不知道为什么看着好想吐。。。建议不要长时间的看着这个图
html5 canvas 径向渐变的更多相关文章
- html5 canvas 径向渐变2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML5 Canvas ( 径向渐变, 升级版的星空 ) fillStyle, createRadialGradient
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5 canvas 填充渐变形状
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- canvas径向渐变详解
创建径向渐变步骤如下: 1,创建径向渐变对象 createRadialGradient(x0,y0,r0,x1,y1,r1),其中x0,y0,r0分别为起始圆的位置坐标和半径,x1,y1,r1为终止圆 ...
- html5 canvas 对角线渐变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas 垂直渐变描边
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas 水平渐变描边
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML5 Canvas ( 线性渐变, 升级版的星空 ) fillStyle, createLinearGradient, addColorStop
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5 canvas图片渐变
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- Linux下tomcat的启动，关闭，以及shutdown失败杀死进程的方法
1.tomcat服务器第一次启动并查看启动日志的命令 在 ../bin 文件夹下输入./startup.sh;tail -f ../logs/catalina.out 2.需要重启服务器的时候 在 . ...
- openstack horizon 开发第二天
依照上次的简单的仪表盘添加动作额外添加或修改的文件mydashboard/├── mypanel│ ├── forms.py│ ├── tables.py│ ├── templates│ ...
- Linux DDos防御
今天要说的就是一款能够自动屏蔽DDOS攻击者IP的软件:DDoS deflate. DDoS deflate介绍 DDoS deflate是一款免费的用来防御和减轻DDoS攻击的脚本.它通过netst ...
- 原生和jquery 的 ajax
form数据的序列化: $('#submit').click(function(){ $('#form').serialize(); //会根据input里面的name,把数据序列化成字符串:eg:n ...
- 第二阶段冲刺——three
个人任务: 王金萱:优化统计个人博客结果页面的显示. 司宇航:绘制logo. 季方:合并程序(优化统计个人博客界面). 马佳慧:选择功能界面的选择框排版设计. 站立会议: 任务看板和燃尽图:
- Java运算符、switch、数组、排序
1.Java的运算符,分为四类:算数运算符.关系运算符.逻辑运算符.位运算符 运算符例子:22.25(十进制转化为二进制,8421码)0010 0010 (22)0010 0101 (25) 位运算符 ...
- A brief introduction of myself
来到博客园的第二天.晚上天色墨蓝,余热未退,北京这里的秋风干松爽利,和小组的伙伴们吃了一顿饱饱的香锅,按照咱们国人的传统,所有的事情在饭桌上都解决了,包括队员之间相互的认识和短期任务的分配以及后期的团 ...
- Linux命令(二十六) 用户管理命令
一.添加用户 useradd useradd 命令用于创建新用户,格式为useradd [选项] 用户名. 可以使用 useradd 命令创建用户帐户,使用该命令创建账户时,默认的用户目录在 /hom ...
- Luogu2257 YY的GCD/BZOJ2818 Gcd加强版（莫比乌斯反演+线性筛）
一通套路之后得到 求出中间那个函数的前缀和的话就可以整除分块了. 暴力求的话复杂度其实很优秀了,大约在n~nlogn之间. 不过可以线性筛做到严格线性.考虑其最小质因子,如果是平方因子那么只有其有贡献 ...
- Java移动文件到另外一个目录
private void moveTotherFolders(String pathName,String fileName,String ansPath){ String startPath = t ...