移动端 HTML5 CANVAS 兼容性问题_H5之家 - 中国HTML5教程资源分享第一站

为了帮助网友解决“移动端 HTML5 CANVAS 兼容性问题”相关的问题，中国学网通过互联网对“移动端 HTML5 CANVAS 兼容性问题”相关的解决方案进行了整理,用户详细问题包括:html5移动utf-8目前在做微信公众平台，使用到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>

坐等大神...!，具体解决方案如下：

解决方案1：
间歇性的无法绘制。是不是有时候可以显示绘制的内容，有时候无法显示。

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

解决方案3：
试一试下面的代码：<!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>

解决方案4：
引用 1 楼 xmt1139057136 的回复:间歇性的无法绘制。是不是有时候可以显示绘制的内容，有时候无法显示。

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

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

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

解决方案6：
引用 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也是执行了的。

解决方案7：
每次都清空缓存试一试！

解决方案8：
有时候是第一次打开就不行应该不是缓存的问题啊

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