js-移动端canvas不清晰解决方法+canvas圆环百分比Demo

解决不清晰

var canvas = document.getElementById('circle');
var ctx = canvas.getContext("2d");

// 屏幕的设备像素比
var devicePixelRatio = window.devicePixelRatio || 1;
// 浏览器在渲染canvas之前存储画布信息的像素比
var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
                    ctx.mozBackingStorePixelRatio ||
                    ctx.msBackingStorePixelRatio ||
                    ctx.oBackingStorePixelRatio ||
                    ctx.backingStorePixelRatio || 1;
// canvas的实际渲染倍率
var ratio = devicePixelRatio / backingStoreRatio;

canvas.style.width = canvas.width + 'px';
canvas.style.height = canvas.height + 'px';

canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;
ctx.setTransform(1, 0, 0, 1, 0, 0);

//下面可以绘制图案
......

Demo

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style type="text/css">
            #box {
                display: inline-block;
            }
            
            #circle {
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="box">
            <canvas id="circle" width="150" height="150"></canvas>
        </div>

    </body>
    <script type="text/javascript">
        (function(doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function() {
                    var clientWidth = docEl.clientWidth;
                    if(!clientWidth) return;
                    if(clientWidth >= 750) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
                };
            if(!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
        
        
        var options = {
            deg: 145, //占比度数
            startAngle: 135, // 起始角度 （3点钟方向为0 顺时针）
            fontText: '激进型',
            fontSize: '40px Microsoft YaHei',
            fontColor: '#fc5819',
            lineWidth: 30, //圆环的宽度
            width: 3.4, // 总宽度(rem单位)
            height: 3.4, // 总高度(rem单位)
            circleBackgroundColor: '#fdf0ed',
            startColor: '#f33b49',
            endColor: '#fd7e23',
        }

        createCircle(options);

        function createCircle(options) {
            var canvas = document.getElementById('circle');
            var ctx = canvas.getContext("2d");

            // 屏幕的设备像素比
            var devicePixelRatio = window.devicePixelRatio || 1;
            // 浏览器在渲染canvas之前存储画布信息的像素比
            var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
                ctx.mozBackingStorePixelRatio ||
                ctx.msBackingStorePixelRatio ||
                ctx.oBackingStorePixelRatio ||
                ctx.backingStorePixelRatio || 1;
            // canvas的实际渲染倍率
            var ratio = devicePixelRatio / backingStoreRatio;

            canvas.style.width = options.width  + 'rem';
            canvas.style.height = options.height + 'rem';

            canvas.width = canvas.width * ratio;
            canvas.height = canvas.height * ratio;
            ctx.setTransform(1, 0, 0, 1, 0, 0);

            var width = canvas.width;
            var height = canvas.height;

            //绘制文字
            ctx.font = options.fontSize;
            ctx.fillStyle = options.fontColor;
            var ratioStr = options.fontText;
            var text = ctx.measureText(ratioStr);
            ctx.fillText(ratioStr, ((width / 2 * ratio) - text.width) / 2, (height / 2 + options.lineWidth / 4)); /*底下的灰圆环*/

            //1.绘制底边圆
            var circleObj = {
                ctx: ctx,
                x: width / 2,
                y: height / 2,
                radius: width / 2 - options.lineWidth / 2,
                lineWidth: options.lineWidth
            };
            circleObj.startAngle = 0 * Math.PI / 180;
            circleObj.endAngle = 360 * Math.PI / 180;
            circleObj.color = options.circleBackgroundColor;
            drawCircle(circleObj);

            //2.绘制带颜色的圆
            var circleObj2 = {
                ctx: ctx,
                x: width / 2,
                y: height / 2,
                radius: width / 2 - options.lineWidth / 2,
                lineWidth: options.lineWidth
            };
            circleObj2.startAngle = (0 + options.startAngle) * Math.PI / 180;
            circleObj2.endAngle = (options.startAngle + options.deg) * Math.PI / 180;
            //渐变色处理
            var r = circleObj2.radius;
            if(options.deg < 135) {
                var my_gradient = ctx.createLinearGradient(r, r, r / 2, r / 2);
            } else {
                var my_gradient = ctx.createLinearGradient(r / 2, r / 2, r / 2 * 3, r / 2);
            }
            my_gradient.addColorStop(0, options.startColor);
            my_gradient.addColorStop(1, options.endColor);
            circleObj2.color = my_gradient;
            drawCircle(circleObj2);

            function drawCircle(circleObj) {
                var ctx = circleObj.ctx;
                ctx.beginPath();
                ctx.arc(circleObj.x, circleObj.y, circleObj.radius, circleObj.startAngle, circleObj.endAngle, false);
                ctx.lineWidth = circleObj.lineWidth;
                ctx.strokeStyle = circleObj.color;
                ctx.lineCap = 'round';
                ctx.stroke();
                ctx.closePath();
            }
        }
    </script>

</html>

js-移动端canvas不清晰解决方法+canvas圆环百分比Demo

解决不清晰

Demo

猜你喜欢