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