html5教程-HTML5 Canvas遇到的几个问题

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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

&nbs p;        1. h ei ght、width和style.height、style.width

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

[html 

<p id="wrap PE r">  

    <canvas height="50" id="canvas1" style="width:100%"></canvas> < PR e n am e="code" class="html">    <canvas height="50" id="canvas2" style="width:100%"></canvas></pre><p>  

 

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

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

[html]  

<p id="wrapper">  

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

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

</p>  

 

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

[html]  

function resizeCanvas(){  

      VAR width = document.getElementById(& # 39;wrapper').offsetWidth;  

      $('#canvas1').attr('width', width);  

      $('#canvas2').attr('width', widht);  

}  

 

         2. clearRect无法清除指定区域

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

[javascript]  

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'));  

测试了一段时间，还没有发现问题。

 

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

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

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

[html 

<p id="wrapper">  

    <canvas height="50" id="canvas1" style="width:100%"></canvas> <pre name="code" class="html">    <canvas height="50" id="canvas2" style="width:100%"></canvas></pre><p>  

 

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

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

[html]  

<p id="wrapper">  

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

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

</p>  

 

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

[html]  

function resizeCanvas(){  

      var width = document.getElementById('wrapper').offsetWidth;  

      $('#canvas1').attr('width', width);  

      $('#canvas2').attr('width', widht);  

}  

 

         2. clearRect无法清除指定区域

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

[javascript]  

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'));  

测试了一段时间，还没有发现问题。

 

觉得 可用，就经常来吧！ 欢迎评论哦！  html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！

总结

以上是 为你收集整理的 html5教程-HTML5 Canvas遇到的几个问题 全部内容，希望文章能够帮你解决 html5教程-HTML5 Canvas遇到的几个问题 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5教程-HTML5 Canvas遇到的几个问题的详细内容...