兼容IE8的canvas自制圆形比例图

zoukankan html css js c++ java

兼容IE8的canvas自制圆形比例图

兼容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>

查看全文

相关阅读:
CDQ分治
 [noip模拟赛2017.7.15]
[noip模拟赛2017.7.11]
[noip模拟赛2017.7.10]
[noip模拟赛2017.7.7]
[noip模拟赛2017.7.6]
[noip模拟赛2017.7.4]
回文检测
 mapreduce引用第三方jar
Spark安装和配置

原文地址：https://www.cnblogs.com/haonantong/p/5065685.html