兼容IE8的canvas自制圓形比例圖

本文轉載自查看原文 2015-12-22 09:55 1916

兼容IE8的canvas自制圓形比例圖，代碼如下：

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
            <HTML>
            <HEAD>
                <TITLE> IE8支持HTML5+CSS3 </TITLE>
                <meta charset="UTF-8">
            <head>


            
            


            
            


            
            <![if !IE]>
            <style>
                #first{
                    margin-top:100px;
                    margin-left:500px;
                    border:1px solid red;
                    position: relative;
                    behavior: url(ie-css3.htc);
                }
                .mySpan{
                    position:absolute;
                    font-size:50px;
                    z-index:99;
                    top: 208px;
                    left: 600px;
                }
            </style>
            </head>
            <body>
            <canvas id="first"width="300" height="300" ></canvas>
            <span class="mySpan">20%</span>
            <input type="text" class="myInput1" value="10">
            <input type="text" class="myInput2" value="20">
            <button type="button" class="myBtn">確定</button>

            <script type="text/javascript" src="jquery-1.7.js"></script>
            <script type="text/javascript">


                console.log(Math.sin(Math.PI/6))

                $(function() {

                    //聲明外圓的半徑和內圓的半徑
                    var myR = 80;
                    var myNeiR = 50;

                    //獲取輸入框里面的值
                    var myInput1_Value = parseInt($(".myInput1").val());
                    var myInput2_Value = parseInt($(".myInput2").val());

                    //判斷輸入框里面的值相加是否超過100
                    if (myInput1_Value + myInput2_Value <= 100) {
                        $(".mySpan").html(myInput1_Value + "%")

                        //聲明第一個進度條所占的百分比並轉換成角度值
                        var myfirst = Math.PI * 2 * myInput1_Value / 100;

                        //聲明第二個進度條所占的百分比並轉換成角度值
                        var mysecond = Math.PI * 2 * myInput2_Value / 100;

                        //聲明獲取畫筆
                        var canvas = document.getElementById('first');

                        //聲明x,y邊的變量，並獲取變量的長度
                        var myYBian = Math.sin(myfirst) * 65;
                        var myXBian = Math.cos(myfirst) * 65;
                        console.log(myYBian + "===================" + myXBian);

                        //聲明並獲取最前面圓的圓心坐標
                        var myYuanX1 = null;
                        var myYuanY1 = null;
                        if (myInput1_Value >= 25 && myInput1_Value <= 50) {
                            var myYuanX1 = myXBian + 126;
                            var myYuanY1 = myYBian + 125;
                        } else if (myInput1_Value > 50 && myInput1_Value <= 75) {
                            var myYuanX1 = myXBian + 125;
                            var myYuanY1 = myYBian + 126;
                        } else if (myInput1_Value > 75 && myInput1_Value <= 100) {
                            var myYuanX1 = myXBian + 124;
                            var myYuanY1 = myYBian + 125;
                        } else {
                            var myYuanX1 = myXBian + 125;
                            var myYuanY1 = myYBian + 124;
                        }

                        var myYBian2 = Math.sin(myfirst + mysecond) * 65;
                        var myXBian2 = Math.cos(myfirst + mysecond) * 65;
                        var myYuanX2 = null;
                        var myYuanY2 = null;
                        if (myInput1_Value + myInput2_Value >= 25 && myInput1_Value + myInput2_Value <= 50) {
                            var myYuanX2 = myXBian2 + 126;
                            var myYuanY2 = myYBian2 + 125;
                        } else if (myInput1_Value + myInput2_Value > 50 && myInput1_Value + myInput2_Value <= 75) {
                            var myYuanX2 = myXBian2 + 125;
                            var myYuanY2 = myYBian2 + 126;
                        } else if (myInput1_Value + myInput2_Value > 75 && myInput1_Value + myInput2_Value <= 100) {
                            var myYuanX2 = myXBian2 + 124;
                            var myYuanY2 = myYBian2 + 125;
                        } else {
                            var myYuanX2 = myXBian2 + 125;
                            var myYuanY2 = myYBian2 + 124;
                        }


                        //畫出最外面的一個圓形
                        var cxt = canvas.getContext("2d")
                        cxt.fillStyle = "#ff3300";
                        cxt.beginPath();
                        cxt.arc(125, 125, myR, 0, Math.PI * 2, true);
                        cxt.closePath();
                        cxt.fill();


                        //再次重新聲明變量顏色
                        cxt.fillStyle = "#0A72CB";
                        //畫一個我角度為我所需要的扇形
                        DrawSector(canvas, myfirst, myfirst + mysecond, myR, true, false);
                        //畫一個添加在我所畫扇形前面的半圓
                        DrawSector3(canvas, myfirst + mysecond, myfirst + mysecond + Math.PI, (myR - myNeiR) / 2, true, false);


                        //重新給畫筆聲明顏色
                        cxt.fillStyle = "#000";
                        //畫一個我角度為我所需要的扇形
                        DrawSector(canvas, 0 * Math.PI, myfirst, myR, true, false);
                        //畫一個添加在我所畫扇形前面的半圓
                        DrawSector2(canvas, myfirst, myfirst + Math.PI, (myR - myNeiR) / 2, true, false);


                        //畫一個白色的實心圓形
                        cxt.fillStyle = "#fff";
                        cxt.beginPath();
                        cxt.arc(125, 125, myNeiR, 0, Math.PI * 2, true);
                        cxt.closePath();
                        cxt.fill();
                    }


                    //畫進度條所需要調用的函數
                    function DrawSector(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
                        var centerPoint = {x: 125, y: 125};
                        start_angle = start_angle || 0;
                        if (canvas_tag.getContext) {
            //開始繪制路徑
                            ctx = canvas_tag.getContext("2d");
                            ctx.beginPath();
            //畫出弧線
                            ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
            //畫出結束半徑
                            ctx.lineTo(centerPoint.x, centerPoint.y);
            //如果需要填充就填充，不需要就算了
                            if (fill) {
                                ctx.fill();
                            } else {
                                ctx.closePath();
                                ctx.stroke();
                            }
                        } else {
                            alert('You need Safari or Firefox 1.5+ to see this demo.');
                        }
                    }


                    //畫最前面半圓所需要調用的函數
                    function DrawSector2(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
                        var centerPoint = {x: myYuanX1, y: myYuanY1};
                        start_angle = start_angle || 0;
                        if (canvas_tag.getContext) {
            //開始繪制路徑
                            ctx = canvas_tag.getContext("2d");
                            ctx.beginPath();
            //畫出弧線
                            ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
            //畫出結束半徑
                            ctx.lineTo(centerPoint.x, centerPoint.y);
            //如果需要填充就填充，不需要就算了
                            if (fill) {
                                ctx.fill();
                            } else {
                                ctx.closePath();
                                ctx.stroke();
                            }
                        } else {
                            alert('You need Safari or Firefox 1.5+ to see this demo.');
                        }
                    }

                    //畫最前面半圓所需要調用的函數
                    function DrawSector3(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
                        var centerPoint = {x: myYuanX2, y: myYuanY2};
                        start_angle = start_angle || 0;
                        if (canvas_tag.getContext) {
            //開始繪制路徑
                            ctx = canvas_tag.getContext("2d");
                            ctx.beginPath();
            //畫出弧線
                            ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
            //畫出結束半徑
                            ctx.lineTo(centerPoint.x, centerPoint.y);
            //如果需要填充就填充，不需要就算了
                            if (fill) {
                                ctx.fill();
                            } else {
                                ctx.closePath();
                                ctx.stroke();
                            }
                        } else {
                            alert('You need Safari or Firefox 1.5+ to see this demo.');
                        }
                    }

                })
            </script>
            <![endif]>

            </body>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 canvas如何兼容IE8 Excel技巧--時尚的圓環比例圖開發筆記:使用canvas實現3D金字塔比例圖表📈 ie8兼容圓角 videojs兼容ie8 echarts如何兼容IE8 websocket兼容IE8 videojs兼容IE8 讓forEach兼容IE8 讓IE8支持HTML5及canvas功能！chart.js圖表繪制工具庫IE8上兼容方案