背景

最近项目上通过iframe嵌入了一个公司其他组开发的工业组态，所以之前的几个文章都是在解决iframe跨域通信的问题.因为项目部署在阿里云上，域名类似于xxx.com，而iframe嵌套的组态是一个子域名页面，类似a.xxx.com。

单点登录

因为是别的组开发的组态，所以实际上在开发中也是需要登陆的，通过将子域名的domain使用了domain.cookie=”xxx.com”设置成主域名的方式共享了cookie中在登录时存储的token，使得用户登录后访问组态不用再次登陆.

iframe通信

因为iframe里面实际上时用canvas画的工业组态，然后在iframe外面有一些按钮，需要放大缩小组态，这就牵扯到iframe和外面的通信，通过h5的postMessage，使用事件的方式完成了通信。

主要的问题解决了，剩下的就是通过组态页面的点击，在页面上获取数据，使用canvas画图，一直没有使用canvas的场景，常用的数据可视化都是使用echart等库完成了，最近刚好业务上使用，打算花点时间看看canvas

canvas

<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。

width和height

1 2	<!-- <canvas> 只有两个可选的属性 width、heigth 属性.默认width 300px height 150px --> <canvas id="canvasApp" widht="300" height="300">试一下浏览器支持不</canvas>

浏览器不支持的替换消息

支持 <canvas> 的浏览器会只渲染 <canvas> 标签，而忽略其中的替代内容。不支持 <canvas> 的浏览器则会直接渲染替代内容。

示例

<html>
    <head>
        <title>Canvas tutorial</title>
        <style type="text/css">
            canvas {
                border: 1px solid black;
            }
        </style>
    </head>
    <canvas id="tutorial" width="300" height="300"></canvas>
    </body>
    <script type="text/javascript">
        function draw(){
            // 1.获取canvas的doom
            var canvas = document.getElementById('cavansApp');
            // 2. 获取渲染上下文
            if(!canvas.getContext) return;
            var ctx = canvas.getContext("2d");
            //开始代码
            
        }
        draw();
    </script>
</html>