问是否已经有针对AngularJS的画布绘制指令？

EN

Angular非常适合于以声明式的方式编写应用程序。一旦你碰到了画布元素，你就不能再使用声明式了，你必须转向一种命令式的编写机制。如果您的应用程序的大部分都提供UI，那么我强烈建议您使用AngularJS。这是一个令人惊叹的框架。

另一方面，如果您的大部分代码将放在canvas元素中，那么AngularJS可能不是您的理想工具。如果你真的坚持在你的大部分应用程序中使用AngularJS，我建议你考虑使用像D3这样的东西，这是一个很好的替代方案，它在幕后使用SVG (它本质上是声明性的，因此是AngularJS的一个很好的助手)。

不久前，我为此构建了一个可配置的指令。

https://github.com/pwambach/angular-canvas-painter

该指令创建canvas元素，并向该元素添加mousedown/mousemove/mouseup事件(以及相应的触摸事件)的处理程序。Mousedown和后续mousemove事件使用canvasContext.quadraticCurveTo()方法绘制贝塞尔曲线，以获得更平滑的笔触(而不仅仅是为每个点绘制圆)。有关绘图算法的详细信息，请参阅本文：http://codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/

这是一个非常好的实现！如果您想转换图像上的画布，我可以添加该方法

    function convertCanvasToImage(canvas) {
       var image = new Image();
       image.src = canvas.toDataURL("image/png");
       return image;
    }

这将使您的源为base64元素的图像标记。

希望能对你有所帮助