HTML5 Canvas实战
2.3 使用自定义图形和填充样式
阅读(

路径和文本

图形及组合

绘制矩形

绘制圆形

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

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

绘制自定义填充样式
图2-3 绘制自定义填充样式

按照以下步骤绘制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。我们将在第三章 绘制视频和图像中,对图像进行更深入的探讨。

相关参考

  • 融会贯通:绘制喷气式飞机

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验