fillStyle径向渐变
<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style></head><body><div><canvas id = "canvas" width = "800px" height = "800px"></canvas></div> <script type = "text/javascript" >
window.onload=function(){
var context = document.getElementById('canvas').getContext('2d')
/* fillStyle 镜像渐变
第一步:
var radialGradient = context.createRadialGradient(300,300,0,300,300,50);
参数1:第一个圆圆心的x坐标
参数2:第一个圆圆心的y坐标
参数3:第一个圆的半径
参数4:第二个圆圆心的x坐标
参数5:第二个圆圆心的y坐标
参数6:第二个圆的半径
第二步:
linearGradient.addColorStop(0,'#fff');
linearGradient.addColorStop(0.25,'yellow');
linearGradient.addColorStop(0.50,'green');
linearGradient.addColorStop(0.60,'red');
参数1:位置的百分比
参数2:渐变的颜色
第三步:
context.fillStyle = linearGradient;
context.fillRect(0,0,800,800);
*/
var radialGradient = context.createRadialGradient(400,400,100,400,400,500);
radialGradient.addColorStop(0,'#fff');
radialGradient.addColorStop(0.25,'yellow');
radialGradient.addColorStop(0.50,'green');
radialGradient.addColorStop(0.60,'red');
radialGradient.addColorStop(0.75,'blue');
radialGradient.addColorStop(1.0,'black');
context.fillStyle = radialGradient;
context.fillRect(0,0,800,800);
}
</script> </body> </html>
fillStyle径向渐变的更多相关文章
- HTML5 Canvas ( 径向渐变, 升级版的星空 ) fillStyle, createRadialGradient
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas径向渐变详解
创建径向渐变步骤如下: 1,创建径向渐变对象 createRadialGradient(x0,y0,r0,x1,y1,r1),其中x0,y0,r0分别为起始圆的位置坐标和半径,x1,y1,r1为终止圆 ...
- Canvas使用渐变之-径向渐变详解
创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1) 一共六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...
- [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置
接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...
- html5 canvas 圆形径向渐变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas 径向渐变2
<!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/ ...
- 使用canvas来完成线性渐变和径向渐变的功能
fillStyle的第二种使用情况就是渐变色的填充.渐变色就分为线性渐变色和径向渐变色. 线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数. 第一步 : 使用一个新的函数cre ...
- CSS3:radial-gradient,径向渐变的使用方法
语法 径向渐变不同于线性渐变,线性渐变是从“一个方向”向“另一个方向”的颜色渐变,而径向渐变是从“一个点”向四周的颜色渐变.其语法如下: background: radial-gradient(cen ...
随机推荐
- 关于z-index鲜为人知的事情
关于z-index很少有人去深入的了解它,因为它看起来一点儿也不复杂,不就是谁的数字大,谁就显示在前面吗?然而今天所摘录的这篇博文,让我震惊了.我承认我从来没有花时间去看具体的z-index相关文档, ...
- DevExpress控件安装、汉化使用教程
前言 DevExpress是一个庞大的控件库,也很是好用(没用过,听说),但是要收费. 网上关于DevExpress的教程满天飞,我找了一下午也没找到正确的安装.简单实用教程,还是自己摸索吧. 自己动 ...
- mysql乐观锁总结和实践--转
原文地址:http://chenzhou123520.iteye.com/blog/1863407 上一篇文章<MySQL悲观锁总结和实践>谈到了MySQL悲观锁,但是悲观锁并不是适用于任 ...
- 解析C#类中的构造函数
<解析C#类中的构造函数> 一. C#中的构造函数概述: C#中类包含数据成员和函数成员.函数成员提供了操作类中数据的某些功能,包括方法.属性.构造器和终结器.运算符和索引器. 构造函数 ...
- 小白Linux入门 三
环境变量 shell 变量: 内存空间 ,命名的内存空间 echo $SHELL 其中SHELL是变量 里面是/bin/bash sudo su 进入root printenv 命令 命令: 内部命 ...
- 开源服务专题之------ssh防止暴力破解及fail2ban的使用方法
15年出现的JAVA反序列化漏洞,另一个是redis配置不当导致机器入侵.只要redis是用root启动的并且未授权的话,就可以通过set方式直接写入一个authorized_keys到系统的/roo ...
- 实现terminal代理
问题 作为一名Linuxer,熟练使用终端是一项必备技能,但终端中有时下载安装功能速度很慢,令人崩溃.我自然而然想到了可否加个代理,提高速度.我之前一直用shadowsocks,浏览器使用switch ...
- 4年,如何从草根成长成为CTO-(第一篇)
茫然的求索 那一年,刚好经济危机,毕业了.经过了很长时间的“网上海投”而杳无音讯之后,终于发现“经济危机真的和自己有点关系了” ,曾经以为经济危机和自己巴刚子打不着. 拿着简历,开始到处去跑招聘市场, ...
- healthMonitoring与运行状况监视
配置针对应用程序的运行状况监视的一个服务 配置节内容比以往的较为复杂,如下 <healthMonitoring Enabled="true|false" heartbeatI ...
- C# 时间戳转换为时间方法
/// <summary> /// 时间戳转为C#格式时间 /// </summary> /// <par ...