近期小鸟情人游戏上了手机qq空间，一个3岁的游戏来了她的第二春。为了能有更好的表现，我们对其进行了一次改版。
改版当中一项就是对原来的弹出框样式进行改进。将大块木板材质改成纯色（边框为圆角金属材质）样式。这样就能够通过9宫格的方式。将图片进行最大程度的缩减。
9宫格原理非常easy，将图片分成9块。当中四个角不拉伸，上下边框进行横向拉伸。左右边框进行纵向拉伸，中间部分则进行随意拉伸以充满新定义的大小区域。
在HTML中，我们会先创建一个新的canvas，该canvas的大小为终于9宫格须要扩展的大小，然后使用drawImage将9宫格原始图片的9块往canvas上画。随后。画完的canvas就是终于拉伸后的图片了。
上核心代码：
var m_canvas = document.createElement('canvas');
m_canvas.width = _cw;
m_canvas.height = _ch;
var m_context = m_canvas.getContext('2d');
// draw center center
m_context.drawImage(this, _cl + _span, _ct + _span, _w-2*_span, _h - 2*_span, _span, _span, _cw - 2 * _span, _ch - 2 * _span);
// draw left center
m_context.drawImage(this, _cl, _ct + _span, _span, _h - 2*_span, 0, _span, _span, _ch - 2 * _span);
// draw right center
m_context.drawImage(this, _cl + _w - _span, _ct + _span, _span, _h - 2*_span, _cw - _span, _span, _span, _ch - 2 * _span);
// draw center top
m_context.drawImage(this, _cl + _span, _ct, _w - 2*_span, _span, _span, 0, _cw - 2 * _span, _span);
// draw center bottom
m_context.drawImage(this, _cl + _span, _ct + _h - _span, _w - 2*_span, _span, _span, _ch - _span, _cw - 2 * _span, _span);
// draw left top
m_context.drawImage(this, _cl, _ct, _span, _span, 0, 0, _span, _span);
// draw right top
m_context.drawImage(this, _cl + _w - _span, _ct, _span, _span, _cw - _span, 0, _span, _span);
// draw left bottom
m_context.drawImage(this, _cl, _ct + _h - _span, _span, _span, 0, _ch - _span, _span, _span);
// draw right bottom
m_context.drawImage(this, _cl + _w - _span, _ct + _h - _span, _span, _span, _cw - _span, _ch - _span, _span, _span);
当中一些变量的含义：
_cw : 拉伸后宽度
_ch : 拉伸后高度
_cl ：9宫格原始图片内容左上角x坐标在原始图片中的位置（方便将多张图片混合到一张大图中）
_ct : 9宫格原始图片内容左上角y坐标在原始图片中的位置（方便将多张图片混合到一张大图中）
_span : 四个角固定大小，为了偷懒。不单独定义宽高，而是直接定义一个正方形区域
_w : 9宫格原始图片宽度
_h : 9宫格原始图片高度
最后生成的m_canvas能够当作一张图片画到正式游戏逻辑的canvas上。
表面上看，这件事情到这里就已经非常完美了。只是在上线后发现有些mtk手机上。这个生成的9宫格区域是画不出来的！
！。通过一顿排查，发如今有些手机上，canvas上画canvas存在一些问题，并不能保证每次都能画上去。
于是想了个办法。是否能将canvas转变成图片。然后再画？于是就找到了以下的代码：
var img = new Image();
img.src = m_canvas.toDataURL("image/png");
哦了，在本地环境跑得非常好，可是升级到现网环境还是不行，发现报Uncaught SecurityError: Failed to execute 'toDataURL' 的错误。查了资料知道这个是由于浏览器限制了获取跨域图片内容的原因，仅仅要不是同域的图片在画到canvas上后就会标记成dirty，这样这个canvas的数据就不能进行获取，当然也不能转换成Image了。网上有个解决方式，就是在源图片获取是加上crossOrange定义，可是我尝试了没有什么效果。
无奈之下，将9宫格图片转移到了同域下临时攻克了问题。