关闭

HTML5-canvas:hybrid框架下黑屏解决方案

标签: 前端canvas黑屏hybrid内H5黑屏javascriptandroid
1879人阅读 评论(0) 收藏 举报
分类:

HTML5-canvas:hybrid框架下黑屏解决方案

场景比较特殊:hybrid app+安卓手机内嵌套的H5+复杂图形绘制=偶先canvas画布元素黑屏:


可以看到,正常dom元素还是能够渲染并呈现,但是页面内主要的两块canvas元素则完全黑屏(此时为canvas设置的任何事件仍然有效)。某些安卓手机的WebView画布元素会呈现出黑屏,不论计算量大小,是否有动画,是否有触控事件,甚至可以认为所有安卓手机都有可能出现黑屏,解决方案不在H5前端,而在客户端。安卓某些版本的webview不支持canvas硬件加速,所以在很多情况下看到动画偶现黑屏。native增加了配置

webView.setLayerType(View.LAYER_TYPE_SOFTWARE,null);

禁止canvas硬件加速,从而避免了类似黑屏、闪烁、动画停滞跳帧和擦除不全一类的问题。取消硬件加速后,动画会更加平顺,但是整体速度会变慢,这个速度的快慢程度取决于手机的计算能力。所以在安卓手机上要想达到统一的动画效果是不可能的。所有安卓手机类似于动画黑屏闪烁的问题都是这个原因。想了解更多内容可以搜一搜安卓webView的这条设置语句。

下面是一篇详细介绍在前端黑屏优化方法的文章链接:

http://blog.csdn.net/yuhk231/article/details/54376137

1
0
查看评论

HTML5-canvas绘图黑屏白屏解决方案(详解双缓冲绘图机制)

HTML5-canvas绘图黑屏白屏解决方案(详解双缓冲绘图机制) 使用canvas绘图的前端工程师可能都会遇到过canvas绘图黑屏、白屏的问题。以前写过一篇文章描述过hybrid下canvas黑屏的一种可能性:  http://blog.csdn.net/yuhk231/articl...
  • yuhk231
  • yuhk231
  • 2017-01-12 11:11
  • 3100

使用html2canvas截图不全问题解决方案——经测可用

首先说明下我们的需求: 在预览详情页时,要将预览页通过点击事件保存为图片 遇到的问题: 在使用了html2canvas插件后,出现了只能截取可视区域的页面的状况 解决方案: 根据需求页面需在加载完成后直接生成幕布,后期通过点击事件直接下载即可 $(function(){ var t...
  • qq_31808577
  • qq_31808577
  • 2017-06-15 09:13
  • 9320

html2canvas网页截图处理不可见区域

关于手机端开发中,使用html2canvas截图操作,想要截取不可见区域的解决办法,文章的方法可供参考。
  • jackqth
  • jackqth
  • 2016-12-12 21:36
  • 4266

关于安卓webview加载网页黑屏、部分黑屏或blank的解决方法

很多朋友在利用安卓的webview加载网页的时候 可能会出现heip
  • u010220965
  • u010220965
  • 2014-08-18 13:51
  • 6836

解决Html5用canvas绘制不出来图片的问题

如果使用html5的ctx.drawImage(img,0,0);绘制不出来, 就改为: img.onload = function(){ctx.drawImage(img,0,0);} 只有img 加载完了,你画它才有意义。
  • kepoon
  • kepoon
  • 2013-09-16 16:07
  • 5778

H5调用本地摄像头

//判断浏览器是否支持HTML5 Canvas window.onload = function () { try { //动态创建一个canvas元 ,并获取他2Dcontext。如果出现异常则表示不支持 document.createElement("canvas")....
  • baidu_31333625
  • baidu_31333625
  • 2017-01-19 17:29
  • 1805

Atititjs h5调用摄像头视频聊天 拍照功能 相机功能 录像attilax总结

Atititjs h5调用摄像头视频聊天 拍照功能 相机功能  录像attilax总结   1.1. 1.1.java调用摄像头就很容易了。。但是js调用摄像头就需要一些支持了 1 1.2. 视频定时截屏监控 1 1.3. 视频功能。略 1 1.4. 拍照的功能只能说是...
  • attilax
  • attilax
  • 2017-02-05 21:14
  • 1940

HTML5 Canvas遇到的几个问题

最近在一个项目中尝试通过Hybrid的方式开发客户端程序,来尽量降低由于程序业务逻辑或者显示界面的改变而来的升级困扰。Hybrid的方式就是本地代码和HTML5应用相结合的方式,其中本地代码负责和底层的硬件打交道,通过WebView提供的接口将硬件数据传递给运行其中HTML页面。这种方式很适合既要和...
  • mydeman
  • mydeman
  • 2013-09-17 12:24
  • 14223

WebView播放HTML5视频,黑屏的问题。

先来说下现象吧。 两部测试手机    1号 Note2  N
  • u013651247
  • u013651247
  • 2014-06-16 15:52
  • 7127

HTML5-canvas:hybrid框架下黑屏解决方案

场景比较特殊:hybrid app+安卓手机内嵌套的H5+复杂图形绘制=偶先canvas画布元素黑屏: 可以看到,正常dom元素还是能够渲染并呈现,但是页面内主要的两块canvas元素则完全黑屏(此时为canvas设置的任何事件仍然有效)。某些安卓手机的WebView画布元素会呈现出黑屏,不论...
  • yuhk231
  • yuhk231
  • 2016-12-10 20:30
  • 1879
    个人资料
    • 访问:61664次
    • 积分:959
    • 等级:
    • 排名:千里之外
    • 原创:26篇
    • 转载:0篇
    • 译文:8篇
    • 评论:17条
    博客专栏
    文章分类