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宫格图片转移到了同域下临时攻克了问题。
HTML5 Canvas中9宫格的坑的更多相关文章
- HTML5 Canvas中实现绘制一个像素宽的细线
正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...
- html5 canvas中CanvasGradient对象用法
html5 中canvas提供了强大的渲染样式,可以实现一些比较复杂的样式设置,今天学习了CanvasGradient对象可以实现一个颜色的渐变 CanvasGradient对象可以实现两种不同形式的 ...
- HTML5 canvas中的路径方法
路径方法 fill() 填充当前绘图(路径) stroke() 绘制已定义的路径 begin ...
- HTML5 canvas 中的线条样式
线条样式属性 lineCap 设置或返回线条的结束端点样式 butt 默认.向线条的每个末端添加平直的边缘. round 向线条的每个末端添加圆形线帽. ...
- HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
- HTML5 Canvas中绘制椭圆的几种方法
1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来 ...
- HTML5 canvas中的转换方法
转换方法 scale(scalewidth,scaleheight) 缩放当前绘图至更大或更小 scalewidth 缩放当前绘图的宽度 (1=100%, ...
- 在 Canvas 中绘制扇形
在 HTML5 Canvas 中,我们可以通过 arc 方法来绘制圆形: // context.arc(x, y, r, sAngle, eAngle, counterclockwise); var ...
- Html5 Canvas Text
html5 canvas中支持对text文本进行渲染;直接的理解就是把text绘制在画布上,并像图形一样处理它(可以加shadow.gradient.pattern.color fill等等):既然它 ...
随机推荐
- 【Tomcat】java.lang.OutOfMemoryError
1.Java heap space Heap size 昨天在服务器上面部署项目,之前服务器上面已经有一个项目的了. 然后我再部署一个,上去跑了之后,居然内存溢出了. 好吧,内存溢出就调一下,调了之后 ...
- 轻量级数据库sqlite的接口说明
原文地址:http://www.cnblogs.com/kfqcome/archive/2011/06/27/2136999.html 一.使用流程 要使用sqlite,需要从sqlite官网下载到三 ...
- 转百度前辈的Trados使用心得
我用Trados的时间不长,可以说是一个新手.但我在较短的时间内就已经初步掌握这个工具,说明它并不是那么神秘,并不是那么深不可测.这里,我说一说学习它的一点体会.在我转发的文章中有的内容,我就少讲一些 ...
- Irrlicht学习之光照的研究
Irrlicht学习之光照的研究 最近研究一下Irrlicht的光照.发现Irrlicht的光照还是比较简单的,相比低于它的OpenGL和Direct3D,设置光源以及设置光照的参数更加人性化(可能是 ...
- listview,fragment结合起来
这是csdn上的以个demo,很适合初学者.来源:http://download.csdn.net/detail/endlife99/7274419,侵删. MainActiviy: package ...
- Oracle Dedicated server 和 Shared server(专用模式 和 共享模式) 说明(转)
一. 官网说明 在DBCA 建库的时候,有提示让我们选择连接类型,这里有两种类型:专用服务器模式和共享服务器模式.默认使用专用模式.如下图: Oracle 官方文档对这两种文档的说明如下: Abou ...
- vnc server配置、启动、重启与连接,图形管理linux系统
环境:RedHat Linux 5企业版.Xwindows:gnome (红帽默认安装的图形界面) 尽管我们可以使用SSH连接远程通过字符界面来操作Linux,但是对于更多熟悉图形人来说是很不方便的, ...
- 正则表达式验证数字、汉字、电话号码,email,整数,浮点数
验证数字的正则表达式集 验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0- ...
- iOS 打印日志的保存 (一)
当我们真机调试app的时候,作为开发人员的我们可以很方便的通过Xcode的debug area查看相关的打印信息.而测试人员在对app进行测试的时候,一旦出现了crash,这时我们就需要把相关的打印信 ...
- C++0x简讯
关于C++0x核心进展的一组简讯 刘未鹏 /文 C++的罗浮宫(http://blog.csdn.net/pongba) Concepts无疑是C++0x的杀手级特性之中的一个(也许称它“杀手级”另一 ...