Canvas绘制星空原理-杨少通

洋葱先生-杨少通感谢您的到来

Canvas绘制原理及效果如下，点击链接可下载、可浏览！

预览效果                下载文档    

1、createRadialGradient，用于创建线性背景，绘制星空什么的，不用这个你就out了。语法：context.createRadialGradient(x0,y0,r0,x1,y1,r1)；其中，x0,y0,r0表示线性背景的起始坐标x,y和半径，x1,y1,r1表示的是线性背景的结束坐标x,y和半径。在使用时，必须先获取画布的context，用法如下：

1

2

3

var c=document.getElementById(“myCanvas”);

var ctx=c.getContext(“2d”);

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

需要指明的是，线性背景必须得指定颜色，否则就不叫线性背景了，当只有一直颜色时，则为纯色。如果没指定任何的颜色，则创建的线性背景默认是透明的。像下面这样就等于什么都没有。

1

2

3

4

5

6

7

var canvas = document.getElementById(‘canvas’),

ctx = canvas.getContext(‘2d’),

gradient2 = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);

ctx.fillStyle = gradient2;

ctx.beginPath();

ctx.arc(100, 100, 100, 0, Math.PI * 2);

ctx.fill();

createRadialGradient实现的线性渐变的大致原理是：发生渐变的区域是从cycle1上的点到cycle2上的点所连成区域，所以当两个圆相离的时候，会形成放射状的扇形。要想指定颜色，则需要用到addColorStop，这可以说是为RadialGradient专门定制的，添加颜色时，要这样使用RadialGradient.addColorStop(stop,color);其中，stop是介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。stop表示在结束位置显示的 CSS 颜色值。对于同一个RadialGradient，可以多次使用addColorStop()以达到更好颜色的效果。

1

2

3

4

5

6

7

8

9

10

11

var canvas = document.getElementById(‘canvas’),

ctx = canvas.getContext(‘2d’),

gradient2 = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);

      gradient2.addColorStop(0.025, '#fff');

      gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');

      gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');

      gradient2.addColorStop(1, 'transparent');

ctx.fillStyle = gradient2;

ctx.beginPath();

ctx.arc(100, 100, 100, 0, Math.PI * 2);

ctx.fill();

上面的hue是个0到255之间的数字，当然，你也可以使用其他的颜色模式，比如#000，或者rgba(255,255,0,.5)等。

2、globalCompositeOperation，用于画布中多个颜色的合成操作，即当有几个画布集中到一起是，颜色的一种遵循规律。有点像ps中的选区功能，是合成，减去还是叠加。下面说一下它的每个值的含义：
source-over 默认。在目标图像上显示源图像。
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over 在源图像上方显示目标图像。
destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter 显示源图像 + 目标图像。
copy 显示源图像。忽略目标图像。
source-over 使用异或操作对源图像与目标图像进行组合。

1

2

3

var canvas = document.getElementById(“canvas”),

context = canvas.getContext(‘2d’);

context.globalCompositeOperation = “lighter”;//使有叠加的部分更亮

内容非原创，转载自： 李老表博客 » 关于canvas的createRadialGradient,addColorStop,globalCompositeOperation