CanvasTools - 基于Canvas的截图辅助工具集

2019年8月25日 317次阅读 来源: Smohan

CanvasTools

基于Canvas的截图辅助东西集。包括矩形，椭圆，画笔，笔墨，马赛克等多种东西以及打消，保留等种种功用

《CanvasTools - 基于Canvas的截图辅助工具集》

Github地点

项目地点

DEMO

仿知乎截图反应

项目构想泉源于知乎发起反应功用中的截图反应。期初看到该功用，惊为天人，不能不信服知乎对用户体验的细节寻求。然后又对照和参考了QQ截图（基础款式泉源于此），花了三天时候完成了CanvasTools项目的构建。
停止现在，在完成了大部分功用的同时，也进修了大部分的Canvas API：

可用功用

  • 矩形东西

  • 椭圆东西

  • 画笔东西

  • 笔墨东西

  • 马赛克东西

  • 打消功用

  • 保留功用(IE10+)

待完成功用

  • 橡皮擦东西

怎样运用

1.运用NPM

  • npm install

  • npm run build

2.直接运用

1.页面head标签中引入

<link rel="stylesheet" href="../dist/canvastools.min.css">

2.在body中建立canvas以及用来安排东西条的容器

...
<canvas id="myCanvas" width="800" height="600"></canvas>
<div id="myCanvasTools"></div>
...

3.在 </body> 之前挪用

<script src="../dist/canvastools.min.js"></script>
<script>
var canvasTools = new CanvasTools(document.getElementById('myCanvas'), {
    container : document.getElementById('myCanvasTools')
})
</script>
    原文作者：Smohan
    原文地址: https://segmentfault.com/a/1190000009682254
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞