使用Canvas绘制调色板和工艺卡片

本文继续学习《从0到1 HTML5 Canvas动画开发》。上一篇文章学习了直线绘制函数，并绘制了机械制图中的工程符号。本文接着学习矩形和多边形绘制方法。
绘制多边形主要使用的函数还是moveTo和lineTo，比较麻烦的是计算多边形的点坐标。
绘制矩形主要包括两种方式，一种是绘制描边矩形，也就是空心矩形，另外一种是绘制没有边的实心矩形。这两种绘制方式主要调用的函数如下：

strokeRect函数：该函数用于绘制描边矩形，如果需要设置颜色，需要在调用该函数前设置strokeStyle属性。调用strokeRect函数后，会立刻绘制描边矩形；
fillRect函数：该函数用于绘制不带边的实心矩形，如果需要设置填充颜色，需要在调用该函数之前设置fillStyle属性。调用fillRect函数后，会立刻绘制实心矩形；
rect函数：rect函数属于通用的矩形绘制函数，既可以绘制描边矩形，也可以绘制实心矩形，但调用它后不会立刻绘制矩形。如果需要绘制描边矩形，可以先设置strokeStyle属性，然后调用stroke函数绘制描边矩形。如果需要绘制实心矩形，可以先设置fillStyle属性，然后调用fill函数绘制实心矩形。

函数虽然简单，但是可以使用它们绘制出复杂的形状。本文中有两个程序示例，一个是书中自带的调色板示例，另外一个是绘制工艺卡片的样式。

绘制调色板程序

设置控件属性或者使用程序选择颜色时经常使用调色板。书中给出了两种调色板示例，一种是能看出明显颜色方框的，这种比较容易看出代码实现方式。另外一种是从左到右的颜色带，原来不清楚实现方式，看过示例代码后才发现不是太复杂。实现代码如下所示（书中给的现成代码），程序效果如下图所示：

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript">window.onload=function(){var cnv=document.getElementById("canvas");var cxt=cnv.getContext("2d");for(var i=0;i<6;i++){for(var j=0;j<6;j++){cxt.fillStyle="rgb("+Math.floor(255-42.5*i)+","+Math.floor(255-42.5*j)+",0)";cxt.fillRect(j*25,i*25,25,25);}}var r=255,g=0,b=0;for(var i=0;i<150;i++){if(i<25){g+=10;}else if(i>25 && i<50){r-=10;}else if(i>50 && i<75){g-=10;b+=10;}else if(i>75 && i<100){r+=10;}else{b-=10;}cxt.fillStyle="rgb("+r+","+g+","+b+")";cxt.fillRect(200+3*i,0,3,cnv.clientHeight);}        }</script></head>
<body><canvas id="canvas" width="400" height="300" style="border: 1px dashed gray;"></canvas>
</body>

绘制工艺卡片样式

工艺卡片是制造企业编制工艺及生产加工时常用的东西，其实就是比较复杂的表格，根据生产需要填写工艺信息。在网上找了如下图所示的电镀工艺卡片（卡片样式来源于参考文献3)。从下图可以看出，卡片由文字、线条和矩形组成。本文使用绘制线条和矩形的函数来绘制该卡片样式（不包括文字）。将绘制卡片的步骤分为三部分：卡片头部、卡片中间部分和卡片尾部。每部分的绘制都是使用moveTo、lineTo、strokeRect和fillRect几个函数绘制。完整的代码放在了码云上面，地址为：https://gitee.com/guochao2299/draw-craft-card。程序的运行效果如下图所示：

参考文献：
[1]从0到1，HTML5 Canvas动画开发
[2]https://www.runoob.com/tags/ref-canvas.html
[3]https://baike.baidu.com/item/%E5%B7%A5%E8%89%BA%E5%8D%A1/8940434?fr=aladdin