Javascript 如何制作快速非抗锯齿HTML5canvas基本绘图功能？

我正在尝试在画布中执行抗锯齿绘图功能。 感谢所有关于画布和别名的超级答案

下面是演示：

下面是一行：

function lineXY(mouseX, mouseY, mouseXX, mouseYY){
  var x0= mouseX;
  var y0= mouseY;
  var x1= mouseXX;
  var y1= mouseYY;

var coordinatesArray = [];
// Translate coordinates
// Define differences and error check
var dx = Math.abs(x1 - x0);
var dy = Math.abs(y1 - y0);
var sx = (x0 < x1) ? 1 : -1;
var sy = (y0 < y1) ? 1 : -1;
var err = dx - dy;
// Set first coordinates
coordinatesArray.push([x0,y0]);

// Main loop
while (!((x0 == x1) && (y0 == y1))) {
  var e2 = err << 1;
  if (e2 > -dy) {
    err -= dy;
    x0 += sx;
  }
  if (e2 < dx) {
    err += dx;
    y0 += sy;
  }
  // Set coordinates
coordinatesArray.push([x0,y0]);
  // Return the result
}

 for(var i=0;i<coordinatesArray.length;i++) {
   aliasedCircle(ctx, coordinatesArray[i][0], coordinatesArray[i][1], 100);
 }
}

函数lineXY（mouseX、mouseY、mouseXX、mouseYY）{
var x0=鼠标；
var y0=鼠标；
var x1=mouseXX；
变量y1=鼠标Y；
var坐标阵列=[]；
//平移坐标
//定义差异和错误检查
var dx=数学绝对值（x1-x0）；
var dy=数学绝对值（y1-y0）；
var sx=（x0对于（var i=0；i而言，主要原因当然是生成了大量路径，首先是圆，然后是再现圆路径x每像素长度的线

我们可以做几件事来改善这一点：


我们可以将圆缓存为图像，并将其用作位图画笔。这样就无需为线中的每个点重新生成圆中的所有线。画笔只需在大小或颜色更改时更新

我们不必绘制直线的每个点，我们可以找到一种方法来计算在需要绘制之前可以跳过多少像素，但更好的选择是：

我们可以通过在第一个点和最后一个点之间画一条粗线来“欺骗”，而不是在每个点上画一个圆

最后，我们可以在每个帧上注册鼠标，而不是在每个事件上注册鼠标，以减少负载


第一点非常简单：只需创建一个画笔大小（直径）的屏幕外画布并绘制。若要更改颜色，请重新生成画笔（或使用复合模式并在其上绘制）：


//显示画笔
document.body.appendChild（createBrush（150，#09f））；
函数createBrush（半径、颜色）{
var ctx=document.createElement（“canvas”）.getContext（“2d”）；
ctx.canvas.width=ctx.canvas.height=radius你叫什么急动？试着画得很快，它会停一会儿，然后完成线条。缺陷在半径小于等于20像素的情况下非常明显，但它仍然非常有用：）。我发现了这个帆布象形游戏，看起来问题在这里得到了完美的纠正。我不明白如何：（.如果您感兴趣：@garciaventure是的，这些行是抗锯齿的，但它们要么使用改进的桶填充（考虑边缘上的alpha），要么使用复合模式一次填充所有内容（不看代码）。这里有一种使用复合模式的方法：（我还介绍了如何使用混合模式）。您还可以将笔划及其点与画笔信息一起存储，以便以后可以以任何颜色重新绘制。我发现，绘制一个圆并在线条的每个点复制/粘贴它足以以任意速度绘制大半径。因此，别名现在非常完美：）