HTML5 Canvas中9宫格的坑

最近小鸟情人游戏上了手机qq空间，一个3岁的游戏来了她的第二春。为了能有更好的表现，我们对其进行了一次改版。

改版其中一项就是对原来的弹出框样式进行改进，将大块木板材质改成纯色（边框为圆角金属材质）样式。这样就可以通过9宫格的方式，将图片进行最大程度的缩减。

9宫格原理很简单，将图片分成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宫格图片转移到了同域下暂时解决了问题。