HMI画布说明
1. 画布简介
InoTouchPad中的画布是采用的JavaScript的canvas功能，canvas可实现2D、3D等绘图功能。本人是初学者，经过一段时间的使用体验感觉画布功能十分强大，如果编写内容足够丰富，可基本实现HMI自带的大部分控件的自定义。
画布实现功能总结如下：
①画线，根据HMI像素密度绘制点到点的连接线，可设置线宽、颜色、连接样式、交点样式、透明度等参数。另外可通过画线实现区域像素的全部布满，看起来就是一个图形；
②画圆，根据圆心坐标、半径、起始角、终止角，旋转方向，绘制圆或者圆弧；
③画矩形，根据对角线的起点坐标和终点坐标绘制矩形，有绘制边框和填充两种方式。
绘制的路径或者任何连接线，都可以使用closePath来闭合图形，使用fillStyle填充时会默认闭合。
画布功能是基于canvas但不等同，因为硬件和框架的限制，目前测试发现部分命令不支持，由于研发也没有给出详细的说明，具体不支持的命令需要测试去发现，目前发现的不支持命令后面会给出总结。
2. HMI添加画布
打开InoTouchPad后，画布位置在：右侧工具-增强控件-画布，双击画布按钮拖入画面中，修改画面大小，双击打开画布“属性“，在加载中添加编辑好的脚本。
3. 编写简单的画布程序
①对画布进行定义连接
var canvas =ScreenItem("画面_1","画布_1");
var ctx = canvas.draw2d();
var w =ctx.width();
var h = ctx.height();
设置的画布所在画面和画布名称需要对应上，不然会出现报错，可通过width，height获取画布的宽和高，宽高对于有居中要求的比较重要。
②画布保存和清除
ctx.clearRect(0,0,w,h);
ctx.save();
…
ctx. restore ();
通常情况下，画布编辑第一步是清除整个画布。因为程序中操作会使用到坐标的平移和旋转，所以在操作前一般都使用save保存当前属性，然后进行操作，操作后再使用restore恢复之前的属性，这样就能保证一段程序中的操作不受上下文的属性影响，所以在单段程序中经常会出现save和restore的配合使用，如下图：
③坐标的平移旋转
ctx.rotate(弧度)；
ctx.translate(x,y);
坐标的平移旋转可以用来实现复制图像，例如时针的刻度可以画一条线用多段rotate实现，图居中原点的修改可用translate进行平移。如下图，切记平移旋转一定要配合保存和恢复使用，不然编写的理想位置和实际位置可能出现偏差。
④绘制图形
ctx.beginPath();//开始路径
ctx.moveTo(x,y);//路径起点
ctx.lineTo(x,y);//画线
ctx.arc(0,0,r,0,Math.PI*2,true);//画圆
ctx.strokeStyle=’black’;//路径颜色
ctxfillStyle=’black’;//填充颜色
ctx.stroke();//路径描边
ctx.fill();//颜色填充
ctx. ctxfillStyle=’rgb(0,0,0,1)’; //rgba颜色设定，四个参数分别为红、绿、蓝、透明度。
moveTo 和lineTo中的坐标可以是变量和语句，通过修改变量的值可实现画任何图形，这个功能十分方便。绘画相关命令较多，具体用法可去网站查找资料学习，搜索关键词canvas。
4. 不支持命令
目前发现的InoTouchPad不支持canvas命令或做了修改但未说明的，如下：
arcTo createRadialGradinet addColorStop Image
fillText strokeText
下面分享几个前几天做的小功能，本人也是最近刚接触画布，在论坛没有发现和画布相关的帖子，自己积攒的疑问也挺多，所以想通过此帖和大家一起讨论交流。
第一次发帖，上个帖子因为设置问题导致别人花了水滴但是花的太冤枉，在此致歉，上个帖子的附件已删除。
考虑到大家用的触摸屏版本问题，所以下面分享两个代码放入txt文本内，复制到脚本中，修改 画面名称 和 画布名称 对应上即可。
欢迎大家一起来交流学习。
