如何修复我的HTML5画布中模糊的进度条？ [英] How do I fix blurry progress bar in my HTML5 canvas?
本文介绍了如何修复我的HTML5画布中模糊的进度条？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是一个总共n00b与HTML5和我的工作与画布动态进度栏。这个工作非常好，除了我的进步是非常模糊/模糊/拉伸。
相关代码
function loadProgressbar（）{var datasize = window.innerWidth / 11.2297; var el = document.getElementById（'graph'）; // get canvas el.style.width = datasize; el.style.height = datasize; el.style.marginTop = window.innerWidth / 17.075; el.style.marginLeft = window.innerWidth / 17.075; el.style.position ='relative'; var options = {percent：el.getAttribute（'data-percent'）|| 25，size：el.getAttribute（'data-size'）|| datasize，lineWidth：el.getAttribute（'data-line'）|| window.innerWidth / 111.0667，rotate：el.getAttribute（'data-rotate'）|| 0} var canvas = document.createElement（'canvas'）; canvas.style.display ='block'; canvas.style.position ='absolute'; canvas.style.top ='0'; canvas.style.left ='0'; var span = document.createElement（'span'）; span.style.lineHeight = datasize +'px' span.style.fontSize = window.innerWidth / 24.15 +'px'; span.style.display ='block'; span.style.fontFamily ='sans-serif'; span.style.textAlign ='center'; var ctx = canvas.getContext（'2d'）; canvas.width = canvas.height = options.size; el.appendChild（span）; el.appendChild（canvas）; ctx.translate（options.size / 2，options.size / 2）; // change center ctx.rotate（（ - 1/2 + options.rotate / 180）* Math.PI）; // rotate -90 deg var radius =（options.size - options.lineWidth）/ 2; var drawCircle = function（options_percent，lineWidth，i）{percent = i / 100; percent = Math.min（Math.max（0，percent || 1），1）; ctx.beginPath（）; var grd = ctx.createLinearGradient（0，0，120，120）; grd.addColorStop（0，'＃509e25'）; grd.addColorStop（1，'＃dbfda1'）; if（options_percent =='＃c2c2c2'）{ctx.arc（0，0，radius，0，Math.PI * 2 * percent，false）; ctx.strokeStyle ='＃c2c2c2'; } else {ctx.arc（0，0，radius，i * 0.03，Math.PI * 2 * percent，false）; ctx.strokeStyle = grd; } ctx.lineCap ='round'; ctx.lineWidth = lineWidth; ctx.stroke（）; }; drawCircle（'＃c2c2c2'，options.lineWidth，100）; window.onresize = function（e）{document.getElementById（'graph'）。innerHTML =; loadProgressbar（）; }; var i = 0; var handle = setInterval（function（）{span.textContent = i; i ++; if（i> options.percent）{clearInterval（handle）; return;} drawCircle（options.percent，options.lineWidth， 60）;} window.onload = loadProgressbar;
div id =graphdata-percent =75>< / div>
进度栏图片
我做错了什么？请帮助....
解决方案
为了防止导致模糊的重写，您必须
- 提高指标时清除画布：
context.clearRect（0,0，canvas.width，canvas.height） - 始终使用
context.beginPath开始单独的路径，否则也会导致重写和模糊。 - 不要使用CSS样式化canvas元素。这将改变画布的像素比，并导致失真。相反，调整canvas元素本身的大小：
canvas.width = 100; canvas.height = 100;
strong>
< > var cw = canvas.getContext（2d）; var cw = canvas.getContext（2d）; var cw = canvas.getContext canvas.width; var ch = canvas.height; var PI = Math.PI; var PI2 = PI * 2; var cx = 150; var cy = 150; var r = 80; var min = -PI / 2; var max = min + PI2; var percent = 33; ctx.lineCap ='round'; ctx.font ='24px verdana'; ctx.textAlign ='center'; ctx.textBaseline ='middle'; ctx.fillStyle ='gray' ; $ myslider = $（'＃myslider'）; $ myslider.attr（{min：0，max：100}）。val（33）; $ myslider.on（'input change'，function（）{percent = parseInt （$（this）.val（））; drawGuage（percent）;}）; drawGuage（percent）; function drawGuage（percent）{ctx.clearRect（0,0，cw，ch）; // draw full guage outline ctx.beginPath（）; ctx.arc（cx，cy，r，0，PI2）; ctx.strokeStyle ='lightgray'; ctx.lineWidth = 15; ctx.stroke（）; // draw percent indicator ctx.beginPath（）; ctx.arc（cx，cy，r，min，min +（max-min）* percent / 100）; ctx.strokeStyle ='green'; ctx.lineWidth = 6; ctx.stroke（）; ctx.fillText（percent +'％'，cx，cy）;}
#canvas {border：1px real red; }
< script src =https：// ajax .googleapis.com / ajax / libs / jquery / 1.9.1 / jquery.min.js>< / script>< h4>移动滑块以更改百分比< / h4>< input id = myslider type = < / canvas>
p>
I am a total n00b with HTML5 and am working with the canvas to dynamic progress bar.This works really nicely, except that my progress is rendered very fuzzy/blurry/stretched.
The relevant code
function loadProgressbar() {
var datasize = window.innerWidth / 11.2297;
var el = document.getElementById('graph'); // get canvas
el.style.width = datasize;
el.style.height = datasize;
el.style.marginTop = window.innerWidth / 17.075;
el.style.marginLeft = window.innerWidth / 17.075;
el.style.position = 'relative';
var options = {
percent: el.getAttribute('data-percent') || 25,
size: el.getAttribute('data-size') || datasize,
lineWidth: el.getAttribute('data-line') || window.innerWidth / 111.0667,
rotate: el.getAttribute('data-rotate') || 0
}
var canvas = document.createElement('canvas');
canvas.style.display = 'block';
canvas.style.position = 'absolute';
canvas.style.top = '0';
canvas.style.left = '0';
var span = document.createElement('span');
span.style.lineHeight = datasize + 'px';
span.style.fontSize = window.innerWidth / 24.15 + 'px';
span.style.display = 'block';
span.style.fontFamily = 'sans-serif';
span.style.textAlign = 'center';
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;
el.appendChild(span);
el.appendChild(canvas);
ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
var radius = (options.size - options.lineWidth) / 2;
var drawCircle = function(options_percent, lineWidth, i) {
percent = i / 100;
percent = Math.min(Math.max(0, percent || 1), 1);
ctx.beginPath();
var grd = ctx.createLinearGradient(0, 0, 120, 120);
grd.addColorStop(0, '#509e25');
grd.addColorStop(1, '#dbfda1');
if (options_percent == '#c2c2c2') {
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
ctx.strokeStyle = '#c2c2c2';
} else {
ctx.arc(0, 0, radius, i * 0.03, Math.PI * 2 * percent, false);
ctx.strokeStyle = grd;
}
ctx.lineCap = 'round';
ctx.lineWidth = lineWidth;
ctx.stroke();
};
drawCircle('#c2c2c2', options.lineWidth, 100);
window.onresize = function(e) {
document.getElementById('graph').innerHTML = "";
loadProgressbar();
};
var i = 0;
var handle = setInterval(function() {
span.textContent = i;
i++;
if (i > options.percent) {
clearInterval(handle);
return;
}
drawCircle(options.percent, options.lineWidth, i);
}, 60);
}
window.onload = loadProgressbar;
<div id="graph" data-percent="75"></div>
Progress bar Image
What am I doing incorrectly? please help....
解决方案
To prevent the over-writing that causes blurriness you must
- Clear the canvas when you advance your indicator:
context.clearRect(0,0,canvas.width,canvas.height) - Always begin separate paths with
context.beginPathor you will also get over-writing and blurriness. - Don't style the canvas element with CSS. That will alter the canvas' pixel ratio and cause distortion. Instead resize the canvas element itself:
canvas.width=100; canvas.height=100;
Here's an example of a circular progress indicator:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var PI=Math.PI;
var PI2=PI*2;
var cx=150;
var cy=150;
var r=80;
var min=-PI/2;
var max=min+PI2;
var percent=33;
ctx.lineCap='round';
ctx.font='24px verdana';
ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.fillStyle='gray';
$myslider=$('#myslider');
$myslider.attr({min:0,max:100}).val(33);
$myslider.on('input change',function(){
percent=parseInt($(this).val());
drawGuage(percent);
});
drawGuage(percent);
function drawGuage(percent){
ctx.clearRect(0,0,cw,ch);
// draw full guage outline
ctx.beginPath();
ctx.arc(cx,cy,r,0,PI2);
ctx.strokeStyle='lightgray';
ctx.lineWidth=15;
ctx.stroke();
// draw percent indicator
ctx.beginPath();
ctx.arc(cx,cy,r,min,min+(max-min)*percent/100);
ctx.strokeStyle='green';
ctx.lineWidth=6;
ctx.stroke();
ctx.fillText(percent+'%',cx,cy);
}
#canvas{border:1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Move slider to change guage percentage</h4>
<input id=myslider type=range><br>
<canvas id="canvas" width=300 height=300></canvas>
这篇关于如何修复我的HTML5画布中模糊的进度条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
