我如何用JavaScript绘制画布？ [英] How do I hand draw on canvas with JavaScript?
本文介绍了我如何用JavaScript绘制画布？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题
如何在画布元素上免费绘画（使用我的鼠标/手指），就像您可以用铅笔在油漆中绘制一样？
关于此问题
有很多问题想要在画布上实现免费手绘：
- 使用HTML5 Canvas通过鼠标绘制
- KineticJS - 用鼠标绘制免费
- < a href =http://stackoverflow.com/q/19190135/562769>使用fabric.js在画布上进行免费绘图
- 使用JS进行脚本
- 油漆画布无法正常运行
- 鼠标在画布上的位置绘画
- 在元素上实现平滑的草图绘制
所以我认为提出一个参考问题是个好主意，每个答案都是社区wiki，并且包含一个JavaScript库/纯JavaScript的解释如何
答案的结构
答案应该是社区wiki并使用以下模板：
## [库名称]（链接到项目页面）
###简单示例
一个基本的，完整的例子。这意味着它必须包含HTML
和JavaScript。您可以从这里开始：
<！DOCTYPE html>
< html>
< head>
< title>简单示例< / 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 =sheetwidth =400height =400>< / canvas>
< / body>
< / html>
如果可能，此示例应该同时适用于鼠标和触摸事件。
[JSFiddle]（链接到jsfiddle.net上的代码）
此解决方案适用于：
<！下面的方式：写Hello World
测试这种方式的问题是：
*它是否工作？
*行是否分开？
*当你写得太多时，它会变慢吗？
- >
*桌面计算机：
* [浏览器+版本列表]
*触摸设备：
* [浏览器+版本列表] on [设备名称]
###导入/导出
一些解释如何导入/导出用户绘制的图像。
###行平滑
关于如何操作用户绘制的线的说明。
这可以包括：
*Bézier曲线
*控制线的粗细
解决方案
Fabric.js
<！DOCTYPE html>
< html>
< head>
< title>简单示例< / title>
< script type ='text / javascript'src ='http：//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js'><脚本>
< 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 =sheetwidth =400height =400>< / canvas>
< / body>
< / html>
- 可以使用
canvas.freeDrawingBrush.width - 可以使用
canvas.freeDrawingBrush.color来控制线条的颜色。 ul>
此解决方案适用于：
- 桌面计算机：
$ b b- Chrome 33
- Firefox 28
- 设备：
- Nexus 4上的Chrome 34
- Nexus 4上的Opera 20
- Nexus 4上的Firefox 28
导入/导出
只有通过序列化完整的画布，才能实现，请参见教程
线平滑
自动完成，似乎无法停用。 / p>
Question
How do I draw free (using my mouse / fingers) on a canvas element like you can do it in paint with a pencil?
About this question
There are a lot of questions that want to achieve free hand drawing on canvas:
- draw by mouse with HTML5 Canvas
- KineticJS - Draw free with mouse
- Free drawing on canvas using fabric.js
- Sketching with JS
- Paint canvas not working properly
- Mouse position on canvas painting
- Implementing smooth sketching and drawing on the element
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.
Structure of answers
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>- The width of the lines can be controlled with
canvas.freeDrawingBrush.width. - The color of the lines can be controlled with
canvas.freeDrawingBrush.color.
This solution works with:
- Desktop computers:
- Chrome 33
- Firefox 28
- Touch devices:
- Chrome 34 on Nexus 4
- Opera 20 on Nexus 4
- Firefox 28 on Nexus 4
Import / Export
Is only possible by serializing the complete canvas, see Tutorial
Line smoothing
Is done automatically and it seems not to be possible to deactivate it.
这篇关于我如何用JavaScript绘制画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
- 桌面计算机：
查看全文
