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>
