洋葱先生-杨少通感谢您的到来
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