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

最新推荐文章于 2022-11-05 19:22:54 发布

gc_2299

最新推荐文章于 2022-11-05 19:22:54 发布

阅读量625

点赞数

分类专栏：网页编程文章标签： Ubuntu VSCode Canvas 调色板工艺卡片

本文链接：https://blog.csdn.net/gc_2299/article/details/109130428

版权

网页编程专栏收录该内容

139 篇文章 10 订阅

订阅专栏

本文继续学习《从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