Javascript HTML5画布支持和Android Webview_Javascript_Android_Html_Canvas_Webview

Javascript HTML5画布支持和Android Webview

javascript android html canvas webview

Javascript HTML5画布支持和Android Webview,javascript,android,html,canvas,webview,Javascript,Android,Html,Canvas,Webview,我需要在我的应用程序中绘制图表。为此，我使用RGraph（）；它允许使用Javascript绘制交互式图表。我将javascript代码放在应用程序资产中的HTML文档中，并从ViewPager中的片段调用它以下是HTML和javascript代码： <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <html> <head>

我需要在我的应用程序中绘制图表。为此，我使用RGraph（）；它允许使用Javascript绘制交互式图表。我将javascript代码放在应用程序资产中的HTML文档中，并从ViewPager中的片段调用它

以下是HTML和javascript代码：

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<html>
<head>    
    <script src="./libraries/RGraph.common.core.js" ></script>
    <script src="./libraries/RGraph.common.dynamic.js" ></script>
    <script src="./libraries/RGraph.common.tooltips.js" ></script>
    <script src="./libraries/RGraph.common.effects.js" ></script>
    <script src="./libraries/RGraph.pie.js" ></script>
    </head>
<body background="../transparent.png"> 

    <canvas id="cvs" width="420" height="400">[No canvas support]</canvas>
           
    <script>
    
        function CreateGradient (obj, color)
        {
            return RGraph.RadialGradient(obj, 200, 150, 95, 200, 150, 125, color, color)
        }
        
        function isCanvasSupported(){
            var test_canvas = document.createElement("canvas");
            var canvascheck=(test_canvas.getContext) ? true : false ;           
          return canvascheck;
        }
        window.onload = function ()
        {
            if(isCanvasSupported)
               DrawPieChart();
            else
               document.write("hheheheheh");
        }
        
        
        function DrawPieChart ()
        {
                    var canvas = document.getElementById('cvs');
            var ctx = canvas.getContext('2d');
            var pie = new RGraph.Pie('cvs', [2,3,6,7,82]);
            pie.Set('chart.colors', [
                                     CreateGradient(pie, '#580600'),
                                     CreateGradient(pie, '#AEAEAE'),
                                     CreateGradient(pie, '#860100'),
                                     CreateGradient(pie, '#C7C7C7'),
                                     CreateGradient(pie, '#A70000')
                                    ]);
            pie.Set('chart.labels.sticks', true);
            pie.Set('chart.labels.sticks.length', 5);
            pie.Set('chart.tooltips', ['Autres',
            'Italie',
            'Royaume-Uni',
            'Espagne',
            'France']);
            pie.Set('chart.labels', ['2%','3%','6%','7%','82%']);
            pie.Set('chart.radius', 150);
            pie.Set('chart.shadow', true);
            pie.Set('chart.shadow.offsetx', 0);
            pie.Set('chart.shadow.offsety', 0);
            pie.Set('chart.shadow.blur', 25);
            pie.Draw();        
        }
    </script>
</body>
</html>

它在模拟器和Eclipse浏览器上运行良好。。。但是当我想在智能手机上看到它的时候，我有一个关于画布的bug。有时正确显示图表，有时显示“无画布支持”。在ViewPager中，只有片段n、片段n-1和n+1同时被实例化。当用户在另一个片段上滚动时，会实例化其他片段。因此，每次用户滚动时，都会加载一个HTML。有时画布受支持，有时不受支持

我试图在javascript中获得对画布的支持，但它总是返回支持画布，而事实并非如此

有什么想法吗？

尝试在onResume（）方法上加载webview：

我也为我工作过，我还清除了

onPause（）中的缓存
@Override
    public void onActivityCreated(Bundle savedInstanceState) {
        mWebView = (WebView)getActivity().findViewById(R.id.group_fragment_one_webView);
        mWebView.setFocusable(false);
        mWebView.loadUrl("file:///android_asset/graphs/graph1.html");
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setDefaultZoom(ZoomDensity.FAR);
        mWebView.getSettings().setDefaultFontSize(24);
        mWebView.getSettings().setBuiltInZoomControls(false);
        mWebView.setBackgroundColor(0);
        mWebView.setHorizontalScrollBarEnabled(false);
        mWebView.setVerticalScrollBarEnabled(false);
        mWebView.getSettings().setSupportZoom(false);
        mWebView.getSettings().setRenderPriority(RenderPriority.HIGH);

        String TAG = "HTML 5";
        WebSettings ws = mWebView.getSettings();
        ws.setJavaScriptEnabled(true);
        ws.setAllowFileAccess(true);


        if (Build.VERSION.SDK_INT>=Build.VERSION_CODES.ECLAIR) {
            try {
                Method m1 = WebSettings.class.getMethod("setDomStorageEnabled", new Class[]{Boolean.TYPE});
                m1.invoke(ws, Boolean.TRUE);

                Method m2 = WebSettings.class.getMethod("setDatabaseEnabled", new Class[]{Boolean.TYPE});
                m2.invoke(ws, Boolean.TRUE);

                Method m3 = WebSettings.class.getMethod("setDatabasePath", new Class[]{String.class});
                m3.invoke(ws, "/data/data/" + getActivity().getApplicationContext().getPackageName() + "/databases/");

                Method m4 = WebSettings.class.getMethod("setAppCacheMaxSize", new Class[]{Long.TYPE});
                m4.invoke(ws, 1024*1024*8);

                Method m5 = WebSettings.class.getMethod("setAppCachePath", new Class[]{String.class});
                m5.invoke(ws, "/data/data/" + getActivity().getApplicationContext().getPackageName() + "/cache/");

                Method m6 = WebSettings.class.getMethod("setAppCacheEnabled", new Class[]{Boolean.TYPE});
                m6.invoke(ws, Boolean.TRUE);

                Log.d(TAG, "Enabled HTML5-Features");
            }
            catch (NoSuchMethodException e) {
                Log.e(TAG, "Reflection fail", e);
            }
            catch (InvocationTargetException e) {
                Log.e(TAG, "Reflection fail", e);
            }
            catch (IllegalAccessException e) {
                Log.e(TAG, "Reflection fail", e);
            }

        }


        mTextView1 = (TextView)getActivity().findViewById(R.id.group_fragment_one_textview1);
        mTextView1.setText(getActivity().getResources().getString(R.string.group_fragment_one_text1));
        Spannable spanSize = new SpannableString(mTextView1.getText());
        spanSize.setSpan(new RelativeSizeSpan(2.0f),
                0,
                mTextView1.getText().toString().indexOf("millions"),
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

        mTextView1.setText(spanSize);
        Spannable colorSpan = new SpannableString(mTextView1.getText());        
        colorSpan.setSpan(new ForegroundColorSpan(getActivity().getResources().getColor(R.color.red_ribbon)),
                0,
                mTextView1.getText().toString().indexOf("millions"),
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        mTextView1.setText(colorSpan);
        mTextView1.setTypeface(Utils.getTextFont(getActivity().getApplicationContext()));


        mTextView2 = (TextView)getActivity().findViewById(R.id.group_fragment_one_textview2);
        mTextView2.setText(getActivity().getResources().getString(R.string.group_fragment_one_text2));
        spanSize = new SpannableString(mTextView2.getText());
        spanSize.setSpan(new RelativeSizeSpan(2.0f),
                0,
                mTextView2.getText().toString().indexOf("du chiffre"),
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

        mTextView2.setText(spanSize);
        colorSpan = new SpannableString(mTextView2.getText());        
        colorSpan.setSpan(new ForegroundColorSpan(getActivity().getResources().getColor(R.color.red_ribbon)),
                0,
                mTextView2.getText().toString().indexOf("du chiffre"),
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        mTextView2.setText(colorSpan);
        mTextView2.setTypeface(Utils.getTextFont(getActivity().getApplicationContext()));


        super.onActivityCreated(savedInstanceState);
    }

@Override
public void onResume(){

    mWebView.loadUrl("file:///android_asset/graphs/graph1.html");
    super.onResume();

}