2.3 使用自定义图形和填充样式

优质

小牛编辑

141浏览

2023-12-01

本节，我们将绘制四个三角形，并用不同的填充样式来填充每个三角形。HTML5的画布API提供的填充样式有颜色、线性渐变、径向渐变和图案。

按照以下步骤绘制4个三角形，一个使用颜色填充、一个使用线性渐变填充、一个使用径向渐变填充、一个使用图案填充：

1. 创建一个简单的函数，该函数绘制一个矩形：

function drawTriangle(context, x, y, triangleWidth, triangleHeight, fillStyle) {
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x  + triangleWidth  /  2, y  + triangleHeight); 
  context.lineTo(x  - triangleWidth  /  2, y  + triangleHeight); 
  context.closePath();
  context.fillStyle  = fillStyle; context.fill();
}

2. 定义2D画布上下文，并设置高度、宽度、及三角形在y轴上的位置：

  window.onload = function(){
    var canvas  = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var grd;
    var triangleWidth  =  150; 
    var triangleHeight =  150;
    var triangleY = canvas.height / 2 - triangleWidth / 2;

3. 绘制使用颜色填充的三角形：

//颜色填充（左侧）
  drawTriangle(context, canvas.width * 1 / 5, triangleY, triangleWidth, triangleHeight, "blue");

4. 绘制使用线性渐变填充的三角形：

  //线性渐变填充（从左向右第二个）
    grd  = context.createLinearGradient(canvas.width * 2 / 5, triangleY, canvas.width * 2 / 5, triangleY + triangleHeight);
    grd.addColorStop(0, "#8ED6FF");  //浅蓝色
    grd.addColorStop(1, "#004CB3");  //深蓝色
    drawTriangle(context, canvas.width  *  2  /  5, triangleY, triangleWidth, triangleHeight, grd);

5. 绘制使用径向渐变填充的三角形：

   //径向渐变填充（从右向左第二个）
   var centerX  =  (canvas.width * 3 / 5 +(canvas.width * 3/ 5 - triangleWidth / 2) + (canvas.width * 3 / 5 + triangleWidth / 2)) / 3;
   var centerY  =  (triangleY + (triangleY + triangleHeight) + (triangleY  + triangleHeight)) / 3;
   grd  = context.createRadialGradient(centerX, centerY,  10, centerX, centerY,  100);
    grd.addColorStop(0, "red");
    grd.addColorStop(0.17, "orange");
    grd.addColorStop(0.33, "yellow");
    grd.addColorStop(0.5, "green");
    grd.addColorStop(0.666, "blue");
    grd.addColorStop(1, "violet");
    drawTriangle(context, canvas.width  *  3  /  5, triangleY, triangleWidth, triangleHeight, grd);

6. 绘制图案填充的三角形：

    //图案填充（右侧）
    var imageObj  = new Image();
    imageObj.onload  = function(){
    var pattern  = context.createPattern(imageObj, "repeat");
    drawTriangle(context, canvas.width  *  4  / 5, triangleY,
    triangleWidth, triangleHeight, pattern);
  };
  imageObj.src  = "wood-pattern.png";
};

7. 在HTML文档的body部分嵌入canvas标签：

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

在第1章曾经介绍过，我们可以使用beginPath()方法来开始一条路径，并使用moveTo()方法移动光标，然后绘制连续的子路径来形成一个路径。我们可以向此过程中添加多个步骤，并调用画布上下文对象上closePath()方法关闭路径，来创建一个图形。

context.closePath();

该方法实际上是告诉画布上下文，通过连接路径的终点和起点来完成当前路径。

在drawTriangle()方法中，我们可以使用beginPath()方法开始一条新路径，并通过moveTo()方法定位绘制光标的位置，使用lineTo()方法绘制三角形两侧的边，然后调用closePath()方法完成三角形的第三条边。

从前面的截屏可以看到，从左向右的第二个三角形使用线性渐变填充。线性渐变可以通过画布上下文的createLinearGradient()方法来创建，线性渐变由一个起始点和一个终点来定义：

var grd=context.createLinearGradient(startX,startY,endX,endY);

其次，我们使用addColorStop()方法来设置渐变的颜色，该方法为某个偏移位置分配一种颜色，沿着渐变线，偏移量从0到1变化：

grd.addColorStop(offset,color);

偏移量为0时，为线性渐变的起点指定颜色，偏移量为1时，为线性渐变的终点指定颜色。本例中，我们为三角形的顶部指定了浅蓝色，底部指定了深蓝色。

再次，我们介绍径向渐变。从右向左第二个三角形使用径向渐变填充，该径向渐变由六种不同颜色组成。径向渐变使用画布上下文对象的createRadialGradient()方法创建，该方法需要四个参数，分别为起点、起点半径、终点、终点半径：

var grd=context.createRadialGradient(startX,startY, startRadius,endX,endY,endRadius);

径向渐变由两个假想的圆来定义，第一个圆由startX, startY, startRadius定义，第二个圆由endX, endY, endRadius定义。跟线性渐变类似，我们可以通过画布上下文对象的addColorStop()方法，沿半径方向指定不同点的颜色。

最后，HTML5的画布API提供的第四种填充样式为图案。我们可以使用画布上下文对象的createPattern()方法创建一个pattern对象，该方法需要一个image对象和一个可选的repeatOption参数：

var pattern=context.createPattern(imageObj, repeatOption);

repeatOption参数可以使用repeat, repeat-x, repeat-y和no-repeat这四个值之一。除非另有说明，repeatOption的默认值是repeat。我们将在第三章绘制视频和图像中，对图像进行更深入的探讨。

2.3 使用自定义图形和填充样式

工作原理

相关参考