HTML5 Canvas中9宫格的坑

近期小鸟情人游戏上了手机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宫格图片转移到了同域下临时攻克了问题。