如何使用 JavaScript 在画布上手绘?

本文介绍了如何使用 JavaScript 在画布上手绘?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在画布元素上自由地(使用我的鼠标/手指)绘画，就像你可以用铅笔在画中画一样?

How do I draw free (using my mouse / fingers) on a canvas element like you can do it in paint with a pencil?

想在canvas上实现自由手绘的问题很多:

There are a lot of questions that want to achieve free hand drawing on canvas:

使用 HTML5 Canvas 通过鼠标绘制
KineticJS - 用鼠标自由绘制
使用fabric.js 在画布上免费绘图
使用 JS 绘制草图
画布无法正常工作
画布上的鼠标位置
在元素上实现流畅的草图和绘图

所以我认为制作一个参考问题是个好主意，其中每个答案都是社区维基，并包含对一个 JavaScript 库/纯 JavaScript 如何在画布上绘画的解释.

So I thought it would be a good idea to make a reference question, where every answer is community wiki and contains a explanation for exactly one JavaScript library / pure JavaScript how to do paint on canvas.

答案应该是社区维基并使用以下模板:

The answers should be community wiki and use the following template:

## [Name of library](Link to project page)
### Simple example
    A basic, complete example. That means it has to contain HTML 
    and JavaScript. You can start with this:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Simple example</title>
        <script type='text/javascript' src='http://cdnjs.com/[your library]'></script>
        <style type='text/css'>
            #sheet {
                border:1px solid black;
            }
        </style>
        <script type='text/javascript'>
            window.onload=function(){
                // TODO: Adjust
            }
        </script>
      </head>
      <body>
        <canvas id="sheet" width="400" height="400"></canvas>
      </body>
    </html>

    If possible, this example should work with both, mouse and touch events.

[JSFiddle](Link to code on jsfiddle.net)

This solution works with:

<!-- Please test it the following way: Write "Hello World"
  Problems that you test this way are:
   * Does it work at all?
   * Are lines separated?
   * Does it get slow when you write too much?
-->

* Desktop computers:
  * [Browser + Version list]
* Touch devices:
  * [Browser + Version list] on [Device name]

### Import / Export
Some explanations how to import / export user drawn images.

### Line smoothing
Explanations about how to manipulate the line the user draws. 
This can include:
  * Bézier curves
  * Controlling thickness of lines

Fabric.js

<!DOCTYPE html>
<html>
  <head>
    <title>Simple example</title>
    <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js'></script>
    <style type='text/css'>
        #sheet {
            border:1px solid black;
        }
    </style>
    <script type='text/javascript'>
        window.onload=function(){
            var canvas = new fabric.Canvas('sheet');
            canvas.isDrawingMode = true;
            canvas.freeDrawingBrush.width = 5;
            canvas.freeDrawingBrush.color = "#ff0000";
        }
    </script>
  </head>
  <body>
    <canvas id="sheet" width="400" height="400"></canvas>
  </body>
</html>

JSFiddle - 演示

线条的宽度可以通过canvas.freeDrawingBrush.width控制.
线条的颜色可以通过canvas.freeDrawingBrush.color控制.

The width of the lines can be controlled with canvas.freeDrawingBrush.width.
The color of the lines can be controlled with canvas.freeDrawingBrush.color.

此解决方案适用于:

台式电脑:
- Chrome 33
- 火狐 28
- Nexus 4 上的 Chrome 34
- Nexus 4 上的 Opera 20
- Nexus 4 上的 Firefox 28
只能通过序列化完整的画布，参见教程
Is only possible by serializing the complete canvas, see Tutorial
自动完成，似乎无法停用它.
Is done automatically and it seems not to be possible to deactivate it.

这篇关于如何使用 JavaScript 在画布上手绘?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Canvas