如何消除Canvas绘制弧线产生的锯齿
想利用Canvas绘制一个扇形的动画,红色的背景图上需要一个黑色的扇形。
最终画面如下:
主要绘制代码如下:
// Objects
function Circle(canvasID, startAngle, endAngle) {
this.canvas = document.getElementById(canvasID);
this.startAngle = startAngle? startAngle: 0;
this.endAngle = endAngle? endAngle: 0;
this.isAniStart = false;
this.startTime = 0;
this.endTime = 0;
this.durationTime = 600;
this.toRadians = function(deg) {
return (deg * Math.PI / 180) - Math.PI/2;
}
this.drawCircle = function(radius) {
var context = this.canvas.getContext('2d');
var centerX = this.canvas.width / 2;
var centerY = this.canvas.height / 2;
var radius = radius? radius: 0;
this.clearCircle();
context.beginPath();
context.moveTo(centerX, centerY);
context.arc(centerX, centerY, radius, this.toRadians(this.startAngle), this.toRadians(this.endAngle));
context.fillStyle = '#000';
context.lineWidth = 0;
context.strokeStyle = '#000';
context.fill();
}
this.clearCircle = function() {
var context = this.canvas.getContext('2d');
context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
仔细看的话,圆的边缘是有锯齿的,我想问下大家如何消除这种锯齿。
会飞的茶几
11 years, 3 months ago