第四、渐变和图案

当你描边或者填充的时候,你用当前的描边或者填充样式。而这可以被设定为一个颜色,一个团或者是渐变。

渐变

渐变指定起始颜色,结束颜色,以及颜色变换的区域。一个单一的渐变包含一个以上的颜色变化。二位画布上绘图上下文支持两种渐变类型:线性 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中更改了大小还是不能更改图案中源图的大小。

 示例下载

第四、渐变和图案

上一篇:尼康d90使用技巧


下一篇:cocos2dx游戏开发简单入门视频教程 (cocos2d-x)- 第4天