移动端 HTML5 CANVAS 兼容性问题

famingyuan 2015-05-10 03:59:06

目前在做微信公众平台，使用到canvas绘制图片，在某些设备上出现偶尔无法绘制的问题。
目前测试出现在 oppo R8007 小米s1上，代码是最最简单的代码，比如绘制一行字，画矩形等，均出现间歇性的无法绘制的问题。

不知道是代码哪里没有做对，还是怎样？请教各位大神，有没有什么解决方案。



<!DOCTYPE HTML>

<html>

<head>

	<title>我要分享</title>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	 

<body>

	 <!-- 绘制用户二维码图片 -->

	 <canvas id="myCanvas" ></canvas>

	 <script type="text/javascript">

	 function draw () {

	 	var canvas = document.getElementById('myCanvas'); 

		 

		canvas.width = 640;

		canvas.height = 600;



		var context = canvas.getContext("2d");



		context.fillStyle = "red";

		context.fillRect(0, 0, 640, 300);

 



	 };

	 draw();

	 </script>

</body>

</html>

坐等大神...!

...全文

1241 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

wjschsg88 2016-08-23

打赏
举报

想问一下楼主，这个问题解决了没有，现在遇到同样的问题。魅族手机也是间歇性的显示。

famingyuan 2015-05-20

打赏
举报

引用 3 楼 xmt1139057136 的回复:

试一试下面的代码：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            var gnt1 = cans.createLinearGradient(10,0,390,0);
            gnt1.addColorStop(0,'red');
            gnt1.addColorStop(0.5,'green');
            gnt1.addColorStop(1,'blue');
            cans.fillStyle = gnt1;
            cans.fillRect(10,10,380,280);
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>

一样的效果，第三次打开，就没有绘制出来。 pageLoad也是执行了的。

famingyuan 2015-05-20

打赏
举报

引用 2 楼 xmt1139057136 的回复:

如果使用html5的ctx.drawImage(img,0,0);绘制不出来，就改为： img.onload = function(){ctx.drawImage(img,0,0);} 只有img 加载完了，你画它才有意义。 更改一下加载顺序。

上面提供的测试代码，没有使用图片的。只是绘制矩形而已

famingyuan 2015-05-20

打赏
举报

引用 1 楼 xmt1139057136 的回复:

间歇性的无法绘制。是不是有时候可以显示绘制的内容，有时候无法显示。

对的就是有时候可以显示，有时候没法显示。代码也不报错

famingyuan 2015-05-20

打赏
举报

有时候是第一次打开就不行应该不是缓存的问题啊

业余草 2015-05-20

打赏
举报

每次都清空缓存试一试！

业余草 2015-05-13

打赏
举报

试一试下面的代码：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            var gnt1 = cans.createLinearGradient(10,0,390,0);
            gnt1.addColorStop(0,'red');
            gnt1.addColorStop(0.5,'green');
            gnt1.addColorStop(1,'blue');
            cans.fillStyle = gnt1;
            cans.fillRect(10,10,380,280);
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>

业余草 2015-05-13