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

发表评论

电子邮件地址不会被公开。