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

Question

我使用HTML5总计n00b，并且正在使用画布来动态进度条。这非常好用，除了我的进度非常模糊/模糊/拉伸。

相关代码

import numpy as np
import pymc as pm
import matplotlib.pyplot as plt

N = 100
shifts = (0, -1)
for shift in shifts:
    obs_mean = 3.5
    obs_total = int(N*obs_mean)
    sigma = 0.01*N
    dice = pm.DiscreteUniform('dice', 1+shift, 6+shift, size=N)

    @pm.deterministic
    def dice2(d=dice):
        return d-shift

    @pm.deterministic
    def calc_total(d=dice2):
        return np.sum(d)

    total = pm.Normal('total', mu=calc_total, tau=1./sigma, observed=True, value=obs_total)

    # package the full model in a dictionary
    model1 = dict(dice=dice, dice2=dice2, calc_total=calc_total, total=total)

    # run the basic MCMC:
    S = pm.MCMC(model1)
    S.sample(iter=100000, burn=10000)

    dice_trace = S.trace('dice2')[:]
    plt.hist(dice_trace.flat, bins=(0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5), normed=True, alpha=0.5)

plt.show()

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;

进度条图片

我做错了什么？请帮帮....

Answer 1

为防止导致模糊的覆盖，您必须

• 推进指标时清除画布：container
• 始终使用context.clearRect(0,0,canvas.width,canvas.height)开始单独的路径，否则您也会过度写作和模糊。
• 不要使用CSS设置canvas元素的样式。这将改变画布＆＃39;像素比和引起失真。而是调整canvas元素本身的大小：context.beginPath

以下是循环进度指示器的示例：

＆＃13;

＆＃13;

canvas.width=100; canvas.height=100;

＆＃13;

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);
}

＆＃13;

#canvas{border:1px solid red; }

＆＃13;

＆＃13;

＆＃13;