jquery帆布圈

前端之家收集整理的这篇文章主要介绍了jquery帆布圈前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我用帆布画做了一个倒计时

工作代码http://jsfiddle.net/ajFsx/

  1. window.onload = function() {
  2. canvas = document.getElementById('timer'),seconds = document.getElementById('counter'),ctx = canvas.getContext('2d'),sec = 180,countdown = sec;
  3. ctx.lineWidth = 8;
  4. ctx.strokeStyle = "#528f20";
  5. var
  6. startAngle = 0,time = 0,intv = setInterval(function(){
  7. var endAngle = (Math.PI * time * 2 / sec);
  8. ctx.arc(65,35,30,startAngle,endAngle,false);
  9. startAngle = endAngle;
  10. ctx.stroke();
  11.  
  12. countdown--;
  13. if ( countdown > 60){
  14. seconds.innerHTML = Math.floor(countdown/60);
  15. seconds.innerHTML += ":" + countdown%60;
  16. }
  17. else{
  18. seconds.innerHTML = countdown;
  19. }
  20. if (++time > sec,countdown == 0 ) { clearInterval(intv),$("#timer,#counter").remove(),$("#timers").prepend('<img id="theImg" src="#" />'); }
  21. },10);
  22. }​

我的问题是以下如何让这张图更好看,所以没有像素?

我在jquery画布上搜索了很多,但我似乎无法找到我正在寻找的地方.

解决方法

默认情况下,Canvas绘图是消除锯齿的.

你总是画画以前的画面.

jsFiddle(证明).

你可以通过调用来轻松解决这个问题

  1. ctx.clearRect(0,200,200);

jsFiddle.

这将清除左上角先前绘制的200px方块.

猜你在找的jQuery相关文章