HTML5 Canvas遇到的几个问题

原创 2013年09月17日 12:24:16

        最近在一个项目中尝试通过Hybrid的方式开发客户端程序,来尽量降低由于程序业务逻辑或者显示界面的改变而来的升级困扰。Hybrid的方式就是本地代码和HTML5应用相结合的方式,其中本地代码负责和底层的硬件打交道,通过WebView提供的接口将硬件数据传递给运行其中HTML页面。这种方式很适合既要和硬件打交道,客户端业务逻辑页面也不是太复杂的应用。当然这篇文章不是讲Hybrid,而是在实现HTML页面时遇到Canvas的问题。

         1. height、width和style.height、style.width

         在之前开发的页面中,一般都是通过CSS来控制页面上元素的尺寸。刚开始使用Canvas时,也采用了同样的方式,可是结果却出人意料。代码如下:

<div id="wrapper">
    <canvas height="50" id="canvas1" style="width:100%"></canvas> 
    <canvas height="50" id="canvas2" style="width:100%"></canvas>
<div>
根据响应式网页设计原则,用百分比控制元素的尺寸可以使其自适应浏览器窗口不同的分辨率的变化。可是,对Canvas却不是这样。当上面的代码执行后,每次都会出现的不同的效果,有时canvas1的宽度只有不到wrapper的一半,而有时高度有莫名其妙的达到了近400px。里面绘制的线条更是找不到影子。

        直到在Stackoverflow上发现了:http://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5,才明白就里。原来Canvas的实际尺寸是通过height和width来控制的;CSS中得height和width使其显示的大小,所以设置了它们就相当于缩放了显示区域,所以才会变形。找到了原因,自然就容易解决问题了:

<div id="wrapper">
      <canvas id="canvas1" height="50" width="300"></canvas>
      <canvas id="canvas2" height="50" width="300"></canvas>
</div>

下面是用来设置尺寸的JavaScript:

function resizeCanvas(){
      var width = document.getElementById('wrapper').offsetWidth;
      $('#canvas1').attr('width', width);
      $('#canvas2').attr('width', widht);
}

         2. clearRect无法清除指定区域

         在应用中会定时重绘Canvas,每次都绘制之前都会用clearRect,将整个Canvas内容清除。刚开始运行时,还没有问题,大概运行了1个小时后就会出现内容无法清除的情况,暂时没有找到原因。在上面的那个回答中提到了重设Canvas的大小会清除原来绘制的内容,所以就采用了下面的方式:

var context = document.getElement('canvas1').getContext('2d');
var width = $('#canvas').attr('width');
$('#canvas1').attr('width',0);
$('#canvas1').attr('width',width);
context.clearRect(0, 0, width, $('#canvas1').attr('height'));
测试了一段时间,还没有发现问题。

版权声明:原创文章,欢迎转载,转载请注明出处和原文链接

clearRect()不能清楚路径

定义: clearRect() 方法清空给定矩形内的指定像素。 注意: clearRect()不能清楚路径。 案例: Document onloa...
  • microcosmv
  • microcosmv
  • 2017年03月12日 00:44
  • 433

移动端Web页面常见问题解决

安卓浏览器看背景图片,有些设备会模糊。用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,...
  • wkyseo
  • wkyseo
  • 2017年09月12日 11:40
  • 420

html5 canvas在图片上画超链接

html5 canvas在图片上画超链接
  • csharp25
  • csharp25
  • 2017年10月18日 18:28
  • 4477

HTML5 -- 使用css3实现简单的响应式布局

本文简单的讲解了如何使用css3实现简单的响应式布局:html5文件: index01...
  • RedGuy_anluo
  • RedGuy_anluo
  • 2016年05月09日 15:12
  • 24910

canvas覆盖透明

html> html lang="en"> head> meta charset="UTF-8"> title>覆盖透明title> head> body> canvas id...
  • huangtianzhu123
  • huangtianzhu123
  • 2017年03月21日 11:44
  • 446

关于canvas画的背景图在chrome下出现闪屏的解决方案

最近在画人物关系拓扑图,当拖拽小图标的时候会出现显屏效果,百度半天没找到解决方案,最终无奈把图片转成base64编码的格式存放在数组中,就解决这个问题了,希望以后也出现这种问题的同事能很快解决这种bu...
  • Deng_gene
  • Deng_gene
  • 2017年02月16日 10:24
  • 694

HTML5 Cavans在Chrome浏览器下绘图闪屏解决方法

这几天在用Html5做消灭星星这个游戏,无奈做出基本效果之后发现发现其他浏览器正常,但Chrome一直出现闪屏的现象。百度一夜无果之后尝试自己解决。 后发现将背景图片设为全局变量,即可解决这一问题~...
  • z309241990
  • z309241990
  • 2013年12月13日 09:09
  • 3003

HTML5 Canvas clearRect無法清除問題

1.clearRect无法清除指定区域          在应用中会定时重绘Canvas,每次都绘制之前都会用clearRect,将整个Canvas内容清除。刚开始运行时,还没有问题,大...
  • u011740841
  • u011740841
  • 2015年07月13日 14:57
  • 1787

布局篇-Canvas布局

使用Canvas布局与在Windows Form窗体上布局基本上是一样的,当控件放置在Canvas里时附加上Canvas.X和Canvas.Y属性 示例代码: ...
  • iamsupercola
  • iamsupercola
  • 2011年12月04日 16:53
  • 2781

移动开发中一些bug及解决方案

网页开发要面对各种各样的浏览器,让人很头疼,而移动开发中,你不但要面对浏览器,还要面对各种版本的手机,ios好一点,而安卓就五花八门了,你可能在开发中也被它们折磨过,或者正在被它们折磨,我在这里说几个...
  • lufy_Legend
  • lufy_Legend
  • 2013年12月23日 09:10
  • 34531
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5 Canvas遇到的几个问题
举报原因:
原因补充:

(最多只允许输入30个字)