canvas放射性渐变填充

最新推荐文章于 2023-12-28 18:46:19 发布

weixin_30873847

最新推荐文章于 2023-12-28 18:46:19 发布

阅读量200

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/eoff/p/5068135.html

版权

今天在学习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);

一开始看到这个效果感到很奇怪。弄明白后觉得可能以后用得到，记录一下。

转载于:https://www.cnblogs.com/eoff/p/5068135.html

weixin_30873847

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas放射性渐变填充

今天在学习canvas时，遇到canvas的fillstyle有一个createRadialGradient()方法，创建放射性渐变。上代码：<!DOCTYPE html><html><body><canvas id="myCanvas" width="300" height="150" style="border:1px soli...
复制链接

扫一扫