canvas放射性渐变填充
2024-10-09 17:52:36
今天在学习canvas时,遇到canvas的fillstyle有一个createRadialGradient()方法,创建放射性渐变。
上代码:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(70,70,0,90,90,30);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(0,0,300,150);
</script>
</body>
</html>
其中createRadialGradient有五个参数:
var grd=ctx.createRadialGradient(70,70,0,90,90,30);
分别为:开始圆的 X 坐标、开始圆的 Y 坐标、开始圆的半径、结束圆的 X 坐标、结束圆的 Y 坐标、结束圆的半径。(坐标都是相对于canvas画布的值)
ctx.fillRect(0,0,300,150);
这一句的几个参数是需要填充的位置: 矩形左上角 X 坐标、 Y 坐标、 右下角 X 坐标、Y 坐标。(上次编辑是理解错误,后两个参数不对,w3school上解释如下图:)
正常情况下,开始圆的圆心在结束圆范围内时,效果入下:
var grd=ctx.createRadialGradient(70,70,0,90,90,50);
开始圆的圆心偏移,中间的深色部分偏移。偏移到结束圆边界时,效果入下:
var grd=ctx.createRadialGradient(55,55,0,90,90,50);
当开始圆圆心坐标位于结束圆范围外时,出现特殊现象:
var grd=ctx.createRadialGradient(40,40,0,90,90,50);
偏移越多,效果越明显:
var grd=ctx.createRadialGradient(20,20,0,90,90,50);
一开始看到这个效果感到很奇怪。弄明白后觉得可能以后用得到,记录一下。
最新文章
- Unity3D访问Android系统目录
- 【JAVA正则表达式】
- Access restriction : The constructor BASE64Decoder() is not accessible due to restriction on required library
- iOS获取的NSDate date时间与实际相差8个小时
- 使用react native for android生成app
- 为什么C/C++语言使用指针
- 漫谈云计算与SOA (1)
- Ant build.xml 批量打渠道包回顾!打第三方jar包总结
- javascipt取整数四舍五入
- PostBack与IsPostBack区别
- C++ *max_element函数找最大元素 *min_element函数找最小元素 STL算法(转)
- 最小二乘法拟合非线性函数及其Matlab/Excel 实现(转)
- EJB 介绍
- winform倒计时
- java JSP自定义标签
- IAR8.11.1安装与破解教程
- 源码安装svn 1.8.9
- 使用Golang编写优化算法 (1)
- Python数据类型-字典
- 用VS不同版本打开项目,报错:MS Build Error MSB4019: Microsoft.WebApplication.targets was not found