使用Canvas绘制简单工程符号

最新推荐文章于 2022-09-18 11:41:10 发布

gc_2299

最新推荐文章于 2022-09-18 11:41:10 发布

阅读量460

点赞数

分类专栏：网页编程文章标签： ubuntu VSCode html5 Canvas 工程符号

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

版权

网页编程专栏收录该内容

139 篇文章 8 订阅

订阅专栏

Canvas是HTML5新增的元素，可以使用它绘制图形、表单等，它和SVG属于两种不同的绘图方式。如果要使用Canvsa，浏览器必须支持HTML5才行，如果是IE浏览器，则至少要IE9才支持HTML5。以下是参考文献1中给出的各浏览器支持HTML5的最低版本。
在这里插入图片描述上一篇文章中的示例是直接复制的参考文献2中的第一章的示例。本文开始，除了逐步学习参考文献2中每章的内容外，还会绘制一些工作中可能会用到的一些图形。本文准备绘制机械制图中的粗糙度符号和形位公差符号。由于才开始学Canvas，仅看到绘制直线部分。本文仅演示绘制只包含直线的图形。以下机械制图符号图形来源于参考文献3-4.
在这里插入图片描述 Canvas坐标系与Winform的相同，都是使用的W3C坐标系：零点在左上角，X轴正方向向右,Y轴正方向向下。

使用Canvas绘制图形，开始比较重要的一步是获取Canvas的上下文环境对象。主要通过以下Javascript代码实现。这有点类似于C#的Winform中获取控件的Graphics对象，有了该对象，就可以开始绘图了。

 var cnv = document.getElementById("canvas");
 var ctx = cnv.getContext("2d");

本文主要使用绘制直线函数，主要的函数包括：

moveTo():把路径移动到画布中的指定点，不创建线条；
lineTo():添加一个新点，然后在画布中创建从该点到最后指定点的线条；
stroke():绘制已定义的路径。

接着就开始绘制图形了。首先是粗糙度的绘制代码（本来想装个CAD软件，然后使用准确的坐标，但是在ubuntu下面装LibreCAD一直没装好，只能先编一些坐标值，看着形状比较像就得了。）：

       // draw roughness A
       cxt.moveTo(50,50);
       cxt.lineTo(60,70);
       cxt.lineTo(70,30);
       cxt.moveTo(50,50);
       cxt.lineTo(65,50);

       // draw roughness B
       cxt.moveTo(100,50);
       cxt.lineTo(110,70);
       cxt.lineTo(120,30);            

       cxt.stroke();

绘制部分形位公差符号的代码如下所示：

        // zhixiandu
        cxt.moveTo(50,150);
        cxt.lineTo(70,150);

        // pingmiandu
        cxt.moveTo(90,150);
        cxt.lineTo(110,150);
        cxt.lineTo(105,160);
        cxt.lineTo(85,160);
        cxt.lineTo(90,150);     

        // pingxingdu   
        cxt.moveTo(130,150);            
        cxt.lineTo(125,160);
        cxt.moveTo(140,150);
        cxt.lineTo(135,160);  

        // chuizhidu
        cxt.moveTo(60,170);
        cxt.lineTo(60,180);
        cxt.moveTo(50,180);
        cxt.lineTo(70,180);

        // qingxiedu
        cxt.moveTo(90,180);
        cxt.lineTo(105,180);
        cxt.moveTo(90,180);
        cxt.lineTo(105,170);

        // duichendu
        cxt.moveTo(130,175);
        cxt.lineTo(150,175);
        cxt.moveTo(135,170);
        cxt.lineTo(145,170);
        cxt.moveTo(135,180);
        cxt.lineTo(145,180);

程序的运行效果如下图所示：
在这里插入图片描述代码比较简单，主要是应用绘制直线函数，后续随着学习的深入，会逐步增加其它绘图函数的使用示例。

[1]https://www.runoob.com/html/html5-canvas.html
[2]从0到1，HTML5 Canvas动画开发
[3]https://jingyan.baidu.com/article/49711c61a9dbddfa441b7c0b.html
[4]https://www.runoob.com/tags/ref-canvas.html