canvas的径向渐变的个人理解

最新推荐文章于 2021-06-27 15:20:11 发布

weixin_44020310

最新推荐文章于 2021-06-27 15:20:11 发布

阅读量816

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_44020310/article/details/109488441

版权

canvas的径向渐变的个人理解

html5的新增元素画布
官方给的教程里的createRadialGradient（x,y,r,x1,y1,r1）里的解释是
x：表示渐变的开始圆的 x 坐标
y：表示渐变的开始圆的 y 坐标
r：表示开始圆的半径
x1：表示渐变的结束圆的 x 坐标
y1：表示渐变的结束圆的 y 坐标
r1：表示结束圆的半径
我感觉是有点懵的，x和y指的是圆心的坐标，第一次看就有点懵，啥叫圆的坐标，然后官方给的代码我感觉不是很好理解，它的坐标太怪了，一点都不适合新手理解

下面是官方的例子，对于第一次看的我有几点解释的
1.首先它的filReat(10,10,150,80)不是0坐标开始的。fillReat的中心是 x = （150+10)/2 = 80, y = (80+10)/2 = 45 ;
2.createRadialGradient(75,50,5,90,60,100);开始圆心为 (75,50)，半径为5，结束圆心为(90,60）半径为100。

就是说，它的渐变的不是以你看到的那个框的中心点渐变的，但是那个图却让人以为它是以框里的中心点来渐变的，所以一点都不好理解，

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

</body>
</html>

在这里插入图片描述

你可以这样改，就容易懂得多了
设置canvas的宽高是200px，渐变的开始和结束圆心都是(100,100)开始的半径是25，结束的半径是100,
就相当于两个同心圆，只不过半径不一样，一个是开始渐变的半径，一个是结束的半径

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(100,100,25,100,100,100);
grd.addColorStop(0,'#8F3E7E');
grd.addColorStop(0.5,'#f99');
grd.addColorStop(1,'#000');

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,200);

</script>

</body>
</html>

在这里插入图片描述

还要注意的一点是，他里面的参考坐标都是基于canvas的而不是单独的坐标，所有的fillReat和渐变的坐标都是参考的canvas里的坐标。

weixin_44020310

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas的径向渐变的个人理解

canvas的径向渐变的个人理解html5的新增元素画布官方给的教程里的createRadialGradient（x,y,r,x1,y1,r1）里的解释是x：表示渐变的开始圆的 x 坐标y：表示渐变的开始圆的 y 坐标r：表示开始圆的半径x1：表示渐变的结束圆的 x 坐标y1：表示渐变的结束圆的 y 坐标r1：表示结束圆的半径我感觉是有点懵的，x和y指的是圆心的坐标，第一次看就有点懵，啥叫圆的坐标，然后官方给的代码我感觉不是很好理解，它的坐标太怪了，一点都不适合新手理解下面是官方的例子，
复制链接

扫一扫