如何修复我的HTML5画布中模糊的进度条？

本文介绍了如何修复我的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 codefunction 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 ImageWhat am I doing incorrectly? please help.... 解决方案 To prevent the over-writing that causes blurriness you mustClear the canvas when you advance your indicator: context.clearRect(0,0,canvas.width,canvas.height)Always begin separate paths with context.beginPath or 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画布中模糊的进度条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！