0

我不得不考虑编写一个库来处理 HTML5 画布的画线、粗线、圆形、正方形等的基本知识，因为我无法禁用嵌入在核心画布算法的浏览器渲染中的功能。

我是否被迫从头开始构建 HTML5 Canvas 渲染过程？如果我是，谁和我一起做这件事？谁想改变世界？

想象一个用 HTML5 编写的简单绘图应用程序......你绘制一个形状......一个像基本圆圈一样的闭合形状，自由的手，更像洋葱而不是圆圈（嗯，这就是我的样子！）......然后想象选择一个油漆桶图标并在您绘制的形状内单击并期望它填充您选择的颜色。

想象一下，当您选择“油漆桶”并单击形状的中间时，您会感到惊讶，它会用颜色填充您的形状......但是，不完全......等等......这是不对的！在您绘制的形状边缘的内侧，背景颜色与填充颜色和边缘颜色之间存在模糊......填充似乎有缺陷。

你想要一个直截了当的“油漆桶”/“填充”......你想画一个形状，然后用颜色填充它......别大惊小怪......用你的颜色填充你的形状的整个该死的内部选择。

您的网络浏览器已决定，当您绘制线条来定义您的形状时，它们将被消除锯齿。如果你为你的形状画一条黑线......好吧，浏览器会沿着边缘绘制灰色像素，在某些地方......让它看起来像一条“更好”的线。

是的，一条“更好”的线* * 完成了油漆/洪水填充过程。

支付浏览器开发人员公开属性以禁用其抗锯齿渲染的成本是多少？当然，禁用会为他们的渲染引擎节省几毫秒的时间！

呸，我真的不想使用 Bresenham 线渲染算法构建我自己的画布渲染引擎......可以做什么......这怎么能改变！！！？？？我需要针对WC3发起请愿吗？？？？如果你有兴趣，你会包括你的名字吗？？？

更新

function DrawLine(objContext, FromX, FromY, ToX, ToY) {
    var dx = Math.abs(ToX - FromX);
    var dy = Math.abs(ToY - FromY);
    var sx = (FromX < ToX) ? 1 : -1;
    var sy = (FromY < ToY) ? 1 : -1;
    var err = dx - dy;
    var CurX, CurY;
    CurX = FromX;
    CurY = FromY;
    while (true) {
        objContext.fillRect(CurX, CurY, objContext.lineWidth, objContext.lineWidth);
        if ((CurX == ToX) && (CurY == ToY)) break;
        var e2 = 2 * err;
        if (e2 > -dy) { err -= dy; CurX += sx; }
        if (e2 < dx) { err += dx; CurY += sy; }
    }
}
4

1 回答 1

1

2016/04 - 更新链接

作为一个选项，您可以将8 位（替换 Retro-Context）用于画布（免责声明：我是作者）。

如果这是自己编写代码的可行替代方案，您可以通过执行以下操作获得线条、圆圈等：

HTML

<canvas id=c width=960 height=600 data-width=320 data-height=200></canvas>

是可选的data-*，代表“本机”解决方案。您也可以将其设置为getContext().

JavaScript

var canvas = document.getElementById('c'),
    ctx = canvas.getContext('8-bit');         // get retro context

现在，您可以使用与常规 2D 上下文完全相同的属性和方法，在没有抗锯齿的情况下绘制线条、圆圈等，以非常老式的复古风格进行像素化。

还有一些方法，例如ellipse()，drawImage()（带有调色板减少和抖动）和其他东西。

该库旨在以“低分辨率”制作具有复古外观的游戏和程序。如果这是一个目标，或者如果您希望使用全尺寸画布作为基础，请不要期望与原生普通画布一样具有完整的性能。

该项目可通过此链接在 GitHub 上获得。

希望这可以帮助！

于 2014-02-02T03:41:14.067 回答