当你描边或者填充的时候,你用当前的描边或者填充样式。而这可以被设定为一个颜色,一个团或者是渐变。
渐变
渐变指定起始颜色,结束颜色,以及颜色变换的区域。一个单一的渐变包含一个以上的颜色变化。二位画布上绘图上下文支持两种渐变类型:线性 linear和径向 radial。
线性渐变
线性渐变定义两点之间颜色沿着一条线变化。
var grad = ctx.createLinearGradient(x1, y1, x2, y2);
之后调用CanvasGradient之中唯一的方法addColorStop()来向渐变色中增加至少两个 “颜色停止点”(color stop)。该方法接受两个参数:一个是位于0~1.0之间的double值,代表颜色停止点在渐变线上的位置;另一个是DOMString类型的CSS3颜色字串值。
grad.addColorStop(0, 'black');
grad.addColorStop(1, 'white');
grad.addColorStop(0.2, 'white');
grad.addColorStop(1/6, 'white');
你同样可以设定颜色为 #000,rgba(0,0,0,1)如
grad.addColorStop(1, 'rgba(255, 255, 255, 0.5)');
从一个色标到另一个,颜色在渐变定义的间隔中变化。定义一个颜色渐变就想是创建画布上的一个虚拟的矩形,但它不显示任何内容。让渐变通过展示,你需要设置填充样式或者是笔触样式为渐变,在渐变之上画些东西!注意,如果你正在绘制的东西超过了渐变的端点,填充或者描边的颜色是最接近的那个色标。
主要代码:
var grad = ctx.createLinearGradient(10, 0, 80, 0);
grad.addColorStop(0, 'black');
grad.addColorStop(1, 'white');
ctx.fillStyle = grad;
ctx.fillRect(10, 10, 100, 100);
如图:
注意到没有设置渐变的两个点位置和填充区域的位置,额外的填充颜色是选择最近的的色标。
注意
你可以添加颜色停止点,但是你不能更改颜色停止点,替换或者删除它。如果你需要改变颜色停止点的话,你必须重新设定颜色停止点。
径向渐变
径向渐变定义沿颜色沿两个圆之间的锥变化。
var grad = ctx.createRadialGradient(x, y, rad, x1, y1, rad1);
传入的两个圆参数,每个定义了圆点和半径,当然用同一个圆点不同的半径也是很常见的。
如:
var grad = ctx.createRadialGradient(50, 50, 5, 50, 50, 50);
grad.addColorStop(0, 'white');
grad.addColorStop(1, 'black');
ctx.fillStyle = grad;
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.fill();
径向渐变通常用来创建一个三维的照明效果。
示例代码:
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.fill();
var grad = ctx.createRadialGradient(50,40, 5, 50, 40, 50);
grad.addColorStop(0, 'rgba(255, 255, 255, 0.9)');
grad.addColorStop(1, 'rgba(0, 0, 0, 0.6)');
ctx.beginPath();
ctx.fillStyle = grad;
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.fill();
设定半径不同,效果也不一样。
代码:
var gradient = ctx.createRadialGradient( can.width/2, can.height,10, can.width/2, 0, 100);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'white');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1, 'yellow');
ctx.fillStyle = gradient;
ctx.rect(0, 0, can.width, can.height);
ctx.fill();
效果:
图案
你可以用图案替代需要非常大的图片。一个图案可以是从小的,自然重复的图像如砂、草或木制作而来。例如,可以用2d纹理生成照片版逼真的风景。
这里的图案可以是以下三种之一:image元素、canvas元素或video元素。可以用createPattern()方法来创建图案,该方法接收两个参数:图案本身,以及一个用来告知浏览器应该如何重复图案的字符串。第二个参数可以取如下的值:repeat、repeat-x、repeat-y或no-repeat。
var dot = document.getElementById("dot");
var pat = ctx.createPattern(dot, "repeat");
举例:
Html:
<img src="butterfly1.png" id="butterfly" />
<canvas id="can" height="200" width="400"></canvas>
javascript
var can = document.getElementById("can");
var ctx = can.getContext("2d");
var bt=document.getElementById("butterfly");
var pat=ctx.createPattern(bt,"repeat");
ctx.lineWidth=100;
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(200,200);
ctx.strokeStyle=pat;
ctx.stroke();
ctx.fillStyle=pat;
ctx.fillRect(80,80,200,200);
当然你可以用script对象 image,前例更改如下:
Html:
<canvas id="can" height="200" width="400"></canvas>
javascript
var can = document.getElementById("can");
var ctx = can.getContext("2d");
var bt=new Image(),pat;
bt.src = 'butterfly1.png';
bt.onload = function (e) {
this.width=
pat=ctx.createPattern(bt,"repeat");
ctx.lineWidth=100;
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(200,200);
ctx.strokeStyle=pat;
ctx.stroke();
ctx.fillStyle=pat;
ctx.fillRect(80,80,200,200);
}
}
提醒
因为CanvasPattern对象是JavaScript语言中的那种所谓“不透明对象”(opaque object),它没有提供用于操作其内容的属性及方法。如果你要更改pattern对象指向的图案只能是调用ctx.createPattern().
如第一个例子中,你设定了图片的样式,更改了显示的大小,但是在图案中还是原来的大小;你在js中更改了大小还是不能更改图案中源图的大小。