canvas教程

canvas毛边的问题,大神求救!!!

字号+ 作者:H5之家 来源:H5之家 2017-04-16 14:01 我要评论( )

用canvas绘制了圆形动态进度条,但是有毛边,请问怎样处理? // canvas进度条。 p为当前的时间。s为开始的时间。 百分比=(现在的时间-开始的时间)/14h functio

canvas毛边的问题,大神求救!!!

用canvas绘制了圆形动态进度条,但是有毛边,请问怎样处理?

// canvas进度条。 p为当前的时间。s为开始的时间。 百分比=(现在的时间-开始的时间)/14h
function cvs(startTime){
// canvas代码
var c=document.getElementById('cvs');
//获取屏幕的宽度
var clientWidth = document.documentElement.clientWidth;
//根据设计图中的canvas画布的占比进行设置
var canvasWidth = Math.floor(clientWidth*600/1082);
//设置canvas的宽高
c.setAttribute('width',canvasWidth+'px');
c.setAttribute('height',canvasWidth+'px');

var cxt=c.getContext("2d"); //改变画布的原点位置 cxt.translate(canvasWidth / 2,canvasWidth / 2) //根据屏幕大小求得画布的缩放比例 var scale = canvasWidth / clientWidth;

// console.log(scale);
// 画布的缩放
cxt.scale(scale,scale);
// 圆弧的半径长度
var r = canvasWidth - 45;

// 底层圆弧 cxt.beginPath(); cxt.strokeStyle="#2FD8B1"; cxt.lineWidth = scale * 30; cxt.lineCap = 'round'; cxt.arc(0,0,r,(-235)*Math.PI/180,55*Math.PI/180,false); cxt.stroke(); // 清除毛边 cxt.globalCompositeOperation = 'source-atop'; var d = new Date(); var nowTime = d.getTime(); var percent = (nowTime - startTime) / (14 * 60 * 60 * 1000); alert(startTime); if(percent === 0){ var percent = nowTime / (14 * 60 * 60 * 1000 + startTime); }; if(percent < 0){ return; }; var p = 0; var timer = setInterval(function () { p = p + 0.01; if(p >= percent){ clearInterval(timer); return; } cxt.beginPath(); cxt.strokeStyle="#d2ef62"; cxt.lineWidth = scale * 30; cxt.lineCap = 'round'; cxt.lineJoin = 'round'; cxt.arc(0,0,r,(-235)*Math.PI/180,(-235+p*290)*Math.PI/180,false); cxt.stroke(); },50) }

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 在android中画圆形图片的几种办法

    在android中画圆形图片的几种办法

    2016-09-29 11:00

网友点评