canvas游戏开发学习之六：运用样式与颜色（二）-Tutorial H5-php.cn

线型 Line styles

可以通过一系列属性来设置线的样式。

lineWidth = value
lineCap = type
lineJoin = type
miterLimit = value

Salin selepas log masuk

我会详细介绍这些属性，不过通过以下的样例可能会更加容易理解。

lineWidth 属性的例子

这个属性设置当前绘线的粗细。属性值必须为正数。默认值是1.0。线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。在下面的例子中，用递增的宽度绘制了10条直线。最左边的线宽1.0单位。并且，最左边的以及所有宽度为奇数的线并不能精确呈现，这就是因为路径的定位问题。

function draw() {  
     var ctx = document.getElementById(&#39;canvas&#39;).getContext(&#39;2d&#39;);  
     for (var i = 0; i < 10; i++){  
       ctx.lineWidth = 1+i;  
       ctx.beginPath();  
       ctx.moveTo(5+i*14,5);  
       ctx.lineTo(5+i*14,140);  
       ctx.stroke();  
     }  
  }

Salin selepas log masuk

想要获得精确的线条，必须对线条是如何描绘出来的有所理解。见下图，用网格来代表 canvas 的坐标格，每一格对应屏幕上一个像素点。在第一个图中，填充了 (2,1) 至 (5,5) 的矩形，整个区域的边界刚好落在像素边缘上，这样就可以得到的矩形有着清晰的边缘。

如果你想要绘制一条从 (3,1) 到 (3,5)，宽度是 1.0 的线条，你会得到像第二幅图一样的结果。实际填充区域（深蓝色部分）仅仅延伸至路径两旁各一半像素。而这半个像素又会以近似的方式进行渲染，这意味着那些像素只是部分着色，结果就是以实际笔触颜色一半色调的颜色来填充整个区域（浅蓝和深蓝的部分）。这就是上例中为何宽度为 1.0 的线并不准确的原因。要解决这个问题，你必须对路径施以更加精确的控制。已知粗 1.0 的线条会在路径两边各延伸半像素，那么像第三幅图那样绘制从 (3.5,1) 到 (3.5,5) 的线条，其边缘正好落在像素边界，填充出来就是准确的宽为 1.0 的线条。对于那些宽度为偶数的线条，每一边的像素数都是整数，那么你想要其路径是落在像素点之间 (如那从 (3,1) 到 (3,5)) 而不是在像素点的中间。同样，注意到那个例子的垂直线条，其 Y 坐标刚好落在网格线上，如果不是的话，端点上同样会出现半渲染的像素点。虽然开始处理可缩放的 2D 图形时会有点小痛苦，但是及早注意到像素网格与路径位置之间的关系，可以确保图形在经过缩放或者其它任何变形后都可以保持看上去蛮好：线宽为 1.0 的垂线在放大 2 倍后，会变成清晰的线宽为 2.0，并且出现在它应该出现的位置上。

lineCap
属性的例子

属性

lineCap的指决定了线段端点显示的样子。它可以为下面的三种的其中之一：butt，round和square。默认是butt。
这个例子里面，我绘制了三条直线，分别赋予不同的lineCap值。还有两条辅助线，为了可以看得更清楚它们之间的区别，三条线的起点终点都落在辅助线上。最左边的线用了默认的butt。可以注意到它是与辅助线齐平的。中间的是round的效果，端点处加上了半径为一半线宽的半圆。右边的是square的效果，端点出加上了等宽且高度为一半线宽的方块。

function draw() {  
     var ctx = document.getElementById(&#39;canvas&#39;).getContext(&#39;2d&#39;);  
     var lineCap = [&#39;butt&#39;,&#39;round&#39;,&#39;square&#39;];  
      
     // Draw guides  
     ctx.strokeStyle = &#39;#09f&#39;;  
     ctx.beginPath();  
     ctx.moveTo(10,10);  
     ctx.lineTo(140,10);  
     ctx.moveTo(10,140);  
     ctx.lineTo(140,140);  
     ctx.stroke();  
     
     // Draw lines  
     ctx.strokeStyle = &#39;black&#39;;  
     for (var i=0;i<lineCap.length;i++){  
       ctx.lineWidth = 15;  
       ctx.lineCap = lineCap[i];  
       ctx.beginPath();  
       ctx.moveTo(25+i*50,10);  
       ctx.lineTo(25+i*50,140);  
       ctx.stroke();  
     }  
   }

Salin selepas log masuk

lineJoin
属性的例子

lineJoin的属性值决定了图形中两线段连接处所显示的样子。它可以是这三种之一：round,bevel和miter。默认是miter。
这里我同样用三条折线来做例子，分别设置不同的lineJoin值。最上面一条是round的效果，边角处被磨圆了，圆的半径等于线宽。中间和最下面一条分别是 bevel 和 miter的效果。当值是miter的时候，线段会在连接处外侧延伸直至交于一点，延伸效果受到下面将要介绍的miterLimit属性的制约。

function draw() {  
      var ctx = document.getElementById(&#39;canvas&#39;).getContext(&#39;2d&#39;);  
      var lineJoin = [&#39;round&#39;,&#39;bevel&#39;,&#39;miter&#39;];  
      ctx.lineWidth = 10;  
      for (var i=0;i<lineJoin.length;i++){  
        ctx.lineJoin = lineJoin[i];  
        ctx.beginPath();  
        ctx.moveTo(-5,5+i*40);  
        ctx.lineTo(35,45+i*40);  
        ctx.lineTo(75,5+i*40);  
        ctx.lineTo(115,45+i*40);  
        ctx.lineTo(155,5+i*40);  
        ctx.stroke();  
     }  
   }

Salin selepas log masuk

miterLimit
属性的演示例子

就如上一个例子所见的应用miter
的效果，线段的外侧边缘会延伸交汇于一点上。线段直接夹角比较大的，交点不会太远，但当夹角减少时，交点距离会呈指数级增大。miterLimit
属性就是用来设定外延交点与连接点的最大距离，如果交点距离大于此值，连接效果会变成了 bevel。

渐变 Gradients

就好像一般的绘图软件一样，我们可以用线性或者径向的渐变来填充或描边。我们用下面的方法新建一个canvasGradient
对象，并且赋给图形的fillStyle或strokeStyle

属性。

createLinearGradient(x1,y1,x2,y2)
createRadialGradient(x1,y1,r1,x2,y2,r2)

Salin selepas log masuk

createLinearGradient方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。createRadialGradient方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

var lineargradient = ctx.createLinearGradient(0,0,150,150);  
var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);

Salin selepas log masuk

创建出canvasGradient对象后，我们就可以用addColorStop方法给它上色了。

addColorStop(position, color)

Salin selepas log masuk

addColorStop
方法接受 2 个参数，position参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。你可以根据需要添加任意多个色标（color stops）。下面是最简单的线性黑白渐变的例子。

var lineargradient = ctx.createLinearGradient(0,0,150,150);  
 lineargradient.addColorStop(0,&#39;white&#39;);  
 lineargradient.addColorStop(1,&#39;black&#39;);

Salin selepas log masuk

createLinearGradient
的例子

本例中，我弄了两种不同的渐变。第一种是背景色渐变，你会发现，我给同一位置设置了两种颜色，你也可以用这来实现突变的效果，就像这里从白色到绿色的突变。一般情况下，色标的定义是无所谓顺序的，但是色标位置重复时，顺序就变得非常重要了。所以，保持色标定义顺序和它理想的顺序一致，结果应该没什么大问题。

第二种渐变，我并不是从 0.0 位置开始定义色标，因为那并不是那么严格的。在 0.5 处设一黑色色标，渐变会默认认为从起点到色标之间都是黑色。你会发现，strokeStyle
和fillStyle属性都可以接受canvasGradient对象。

function draw() {  
   var ctx = document.getElementById(&#39;canvas&#39;).getContext(&#39;2d&#39;);  
   
   // Create gradients  
   var lingrad = ctx.createLinearGradient(0,0,0,150);  
   lingrad.addColorStop(0, &#39;#00ABEB&#39;);  
   lingrad.addColorStop(0.5, &#39;#fff&#39;);  
   //lingrad.addColorStop(0.5, &#39;#26C000&#39;);  
   //lingrad.addColorStop(1, &#39;#fff&#39;);  
   
   var lingrad2 = ctx.createLinearGradient(0,50,0,95);  
   lingrad2.addColorStop(0.5, &#39;#000&#39;);  
   lingrad2.addColorStop(1, &#39;rgba(0,0,0,0)&#39;);  
   
   // assign gradients to fill and stroke styles  
   ctx.fillStyle = lingrad;  
   ctx.strokeStyle = lingrad2;  
     
   // draw shapes  
   ctx.fillRect(10,10,130,130);  
   ctx.strokeRect(50,50,50,50);

Salin selepas log masuk

createRadialGradient
的例子

这个例子，我定义了 4 个不同的径向渐变。由于可以控制渐变的起始与结束点，所以我们可以实现一些比（如在 Photoshop 中所见的）经典的径向渐变更为复杂的效果。（经典的径向渐变是只有一个中心点，简单地由中心点向外围的圆形扩张）。这里，我让起点稍微偏离终点，这样可以达到一种球状 3D 效果。但最好不要让里圆与外圆部分交叠，那样会产生什么效果就真是不得而知了。4 个径向渐变效果的最后一个色标都是透明色。如果想要两色标直接的过渡柔和一些，只要两个颜色值一致就可以了。代码里面看不出来，是因为我用了两种不同的颜色表示方法，但其实是相同的，#019F62 = rgba(1,159,98,1)。

function draw() {
  var ctx = document.getElementById(&#39;canvas&#39;).getContext(&#39;2d&#39;);

  // Create gradients
  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
  radgrad.addColorStop(0, &#39;#A7D30C&#39;);
  radgrad.addColorStop(0.9, &#39;#019F62&#39;);
  radgrad.addColorStop(1, &#39;rgba(1,159,98,0)&#39;);
  
  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
  radgrad2.addColorStop(0, &#39;#FF5F98&#39;);
  radgrad2.addColorStop(0.75, &#39;#FF0188&#39;);
  radgrad2.addColorStop(1, &#39;rgba(255,1,136,0)&#39;);

  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
  radgrad3.addColorStop(0, &#39;#00C9FF&#39;);
  radgrad3.addColorStop(0.8, &#39;#00B5E2&#39;);
  radgrad3.addColorStop(1, &#39;rgba(0,201,255,0)&#39;);

  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
  radgrad4.addColorStop(0, &#39;#F4F201&#39;);
  radgrad4.addColorStop(0.8, &#39;#E4C700&#39;);
  radgrad4.addColorStop(1, &#39;rgba(228,199,0,0)&#39;);
  
  // draw shapes
  ctx.fillStyle = radgrad4;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad3;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad2;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad;
  ctx.fillRect(0,0,150,150);
}

Salin selepas log masuk

图案 Patterns

上一节的一个例子里面，我用了循环来实现图案的效果。其实，有一个更加简单的方法：createPattern。

createPattern(image,type)

Salin selepas log masuk

该方法接受两个参数。Image 可以是一个Image对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y
和no-repeat。图案的应用跟渐变很类似的，创建出一个 pattern 之后，赋给fillStyle或strokeStyle属性即可。

var img = new Image();  
 img.src = &#39;someimage.png&#39;;  
 var ptrn = ctx.createPattern(img,&#39;repeat&#39;);

Salin selepas log masuk

注意：与 drawImage 有点不同，你需要确认 image 对象已经装载完毕，否则图案可能效果不对的。Firefox 目前只支持属性值repeat。如果赋其它值，什么效果都没有的。

createPattern
的例子

这最后的例子，我创建一个图案然后赋给了fillStyle属性。值得一提的是，使用 Image 对象的onloadhandler 来确保设置图案之前图像已经装载完毕。

function draw() {
  var ctx = document.getElementById(&#39;canvas&#39;).getContext(&#39;2d&#39;);
  // create new image object to use as pattern
  var img = new Image();
  img.src = &#39;images/wallpaper.png&#39;;
  img.onload = function(){
    // create pattern
    var ptrn = ctx.createPattern(img,&#39;repeat&#39;);
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,150,150);
  }
  }

Salin selepas log masuk

以上就是canvas游戏开发学习之六：运用样式与颜色（二）的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！