ie8兼容canvas标签

最新推荐文章于 2022-04-06 17:12:00 发布

一位不愿透露姓名的大英俊

最新推荐文章于 2022-04-06 17:12:00 发布

阅读量1.9k

点赞数

分类专栏：工作日记文章标签： ie 8 canvas

本文链接：https://blog.csdn.net/wjy199506/article/details/53673706

版权

工作日记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            text-align: center;
        }
        canvas {
            background: #f0f0f0;
        }
        .box{
            position: relative;
        }
        .num{
            position: absolute;
            top: 50%;
            left: 50%;
            color: #fff;
            font-size: 30px;
            margin-top: -15px;
            margin-left: -15px;

        }
    </style>
    <!--[if IE]>
    <script type="text/javascript" src="html5.js"></script>
    <script type="text/javascript" src="excanvas.compiled.js"></script>
    <![endif]-->

</head>
<body>
<h2>绘制路径——绘制圆环进度条</h2>
<div class="box">
    <canvas id="c4" width="500" height="400">
    </canvas>
    <div class="num">50%</div>
</div>


<script>
    function test(){
        var ctx = document.getElementById("c4").getContext("2d");
//    var ctx = c4.getContext('2d');

        //进度条的底色
        ctx.lineWidth = 20;
        ctx.strokeStyle = '#faf';
        ctx.beginPath();
        ctx.arc(250,200,100, 0, 2*Math.PI);
        ctx.stroke();


        //绘制圆形
        ctx.beginPath();
        ctx.arc(250,200,80, 0, 2*Math.PI);
        ctx.fillStyle = '#333';
        ctx.fill();

        //绘制拱形
        ctx.strokeStyle = '#0a0';
        var degree = 180;  //角度值
        ctx.beginPath();
        ctx.arc(250,200,100,0-Math.PI/2,degree*Math.PI/180-Math.PI/2);
        ctx.lineWidth = 20;
        ctx.stroke();

        //绘制文字
//        ctx.beginPath();
//        ctx.textBaseline = 'bottom'; //设置文本基线为第4线
//        ctx.font = '30px SimHei';
//        var str = '50%'; //文本内容
//        ctx.fillStyle="#fff";
//        ctx.fillText(str,55,90);
    }
    window.onload = test;
</script>
</body>
</html>