canvas实现涂鸦效果_uniapp图片涂鸦资源-CSDN下载

共60个文件

jpg：40个

png：15个

js：2个

需积分: 46 40 浏览量 2019-02-28 17:32:14 上传评论 1 收藏 1.73MB ZIP 举报

在网页开发中，Canvas是HTML5提供的一种强大的图形绘制接口，可以用来实现各种动态图形和交互效果。"canvas实现涂鸦效果"这个主题涉及到的是如何利用Canvas API来创建一个具有涂鸦功能的画板应用。下面将详细讲解实现这一功能所涉及的关键知识点。 1. **Canvas API基础**： - `canvas`元素：HTML5中的`<canvas>`标签用于在网页上绘制2D图形，通过JavaScript控制。 - `getContext()`：获取`canvas`的2D渲染上下文，例如`var ctx = canvas.getContext('2d');`，这是绘图的基础。 - `drawImage()`：用于在画布上绘制图像，可以是图片、画布或视频。 2. **绘制线条**： - `beginPath()`：开始一个新的路径。 - `moveTo()`：移动到画布上的指定位置。 - `lineTo()`：从当前点画直线到指定点。 - `stroke()`：沿着路径绘制边框。 - `lineWidth`：设置线条宽度，如`ctx.lineWidth = 5;`。 - `strokeStyle`：设置线条颜色，如`ctx.strokeStyle = 'black';`。 3. **事件监听**： - `mousedown`、`mousemove`和`mouseup`事件：监听鼠标按下、移动和释放，以追踪用户在画布上的绘画动作。 - `event.clientX`和`event.clientY`：获取鼠标在画布上的坐标。 4. **保存和恢复绘图状态**： - `save()`：保存当前的绘图状态（包括transform、fillStyle、strokeStyle等）。 - `restore()`：恢复到之前保存的绘图状态。 5. **橡皮擦功能**： - 可以通过设置`ctx.globalCompositeOperation`属性为`'destination-out'`，模拟橡皮擦效果，即将新的绘图与原有图像相减。 6. **改变笔触大小和颜色**： - 用户可以通过交互界面（如输入框或颜色选择器）来改变`lineWidth`和`strokeStyle`，实时更新绘画效果。 7. **背景图更换**： - 使用`drawImage()`函数加载并绘制背景图片，用户可以选择上传图片或预设图片作为画布背景。 8. **历史记录**： - 可以使用数组来存储每次绘制的路径，当用户触发撤销或重做操作时，根据历史记录进行添加或删除路径。 - 实现撤销/重做功能，可以使用两个栈，一个保存绘画操作，一个保存撤销操作。 9. **清屏功能**： - 用`clearRect()`方法清除画布上的所有内容，例如`ctx.clearRect(0, 0, canvas.width, canvas.height);`。 10. **保存功能**： - 将画布内容转换为图片（如JPEG或PNG），可以使用`toDataURL()`方法，返回一个data URL，然后可以用`a`标签下载或发送到服务器。通过结合以上知识点，我们可以创建一个完整的涂鸦应用，让用户能够自由地在画布上绘画，同时享受诸如更改笔触大小和颜色、橡皮擦、历史记录、清屏和保存等功能。这些功能的实现需要良好的JavaScript编程基础以及对Canvas API的深入理解。

资源推荐

资源详情

资源评论

收起资源包目录

canvas-scrawl.zip （60个子文件）

canvas-scrawl

images

js1.jpg 43KB

rubber_active.png 1KB

j4.jpg 52KB

大小背景html.jpg 56KB

历史记录基本操作.jpg 35KB

阻止滑动函数.jpg 8KB

size.png 2KB

html1.jpg 65KB

橡皮檫声明.jpg 38KB

清屏js.jpg 14KB

颜色效果图.jpg 16KB

橡皮檫css.jpg 34KB

历史记录css.jpg 13KB

bg.png 1KB

保存效果图.jpg 41KB

js3.jpg 22KB

css1.jpg 42KB

close.png 698B

背景效果图.jpg 13KB

历史记录效果图.jpg 32KB

yellow.jpg 165KB

colors.png 2KB

保存html.jpg 16KB

history.png 1KB

save.png 765B

save_active.png 749B

颜色大小背景弹出框交互.jpg 83KB

橡皮擦最终效果图.jpg 7KB

效果.jpg 22KB

history_active.png 1KB

white.jpg 24KB

颜色html.jpg 93KB

保存js.jpg 87KB

j5.jpg 28KB

bg_active.png 1KB

rubber.png 1KB

size_active.png 2KB

saveFile.jpg 38KB

橡皮檫实现js.jpg 73KB

历史记录实现js.jpg 23KB

js2.jpg 80KB

历史记录html.jpg 12KB

保存声明.jpg 38KB

clear_active.png 998B

橡皮檫基础操作js.jpg 84KB

颜色最终效果.jpg 32KB

颜色大小背景css.jpg 97KB

橡皮檫html.jpg 23KB

colors_active.png 2KB

颜色大小背景声明.jpg 50KB

clear.png 1007B

实现更换背景图.jpg 36KB

擦掉历史效果图.jpg 44KB

实现颜色大小.jpg 101KB

大小效果图.jpg 14KB

handWriting.js 12KB

jquery.min.js 94KB

handWriting.html 5KB

css

handWriting.css 3KB

base.css 776B

<!DOCTYPE html> <html lang="zh"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> <title>涂鸦</title> <link rel="shortcut icon" href="#" /> <link rel="stylesheet" type="text/css" href="css/base.css"> <link rel="stylesheet" type="text/css" href="css/handWriting.css"> </head> <body> <div class="wrapper"> <canvas class="offCanvas"></canvas> <canvas class="canvas"></canvas> </div> <div class="footer"> <div class="control-button"> <div class="item colorButton"><img src="images/colors.png" alt=""><span>黑色</span></div> <div class="item sizeButton"><img src="images/size.png" alt=""><span>中笔</span></div> <div class="item bgButton"><img src="images/bg.png" alt=""><span>背景</span></div> <div class="item rubberButton"><img src="images/rubber.png" alt=""><span>擦掉</span></div> <div class="item historyButton"><img src="images/history.png" alt=""><span>历史</span></div> <div class="item clearButton"><img src="images/clear.png" alt=""><span>清屏</span></div> <div class="item saveButton"><img src="images/save.png" alt=""><span>保存</span></div> </div> <div class="pop-up colors-panel"> <div class="title">笔触颜色<span class="closeBtn"></span></div> <div class="colors"> <div class="lineColors"> <div><span class="red" data-text="红色" data-color="#ff0000"></span></div> <div><span class="blue" data-text="蓝色" data-color="#0000ff"></span></div> <div><span class="green" data-text="绿色" data-color="#00ff00"></span></div> <div><span class="black" data-text="黑色" data-color="#000000"></span></div> <div><span class="orange" data-text="橙色" data-color="#ff6302"></span></div> </div> <div class="lineColors"> <div><span class="red" data-text="红色" data-color="#ff0000"></span></div> <div><span class="blue" data-text="蓝色" data-color="#0000ff"></span></div> <div><span class="green" data-text="绿色" data-color="#00ff00"></span></div> <div><span class="black" data-text="黑色" data-color="#000000"></span></div> <div><span class="orange" data-text="橙色" data-color="#ff6302"></span></div> </div> </div> </div> <div class="pop-up size-panel"> <div class="title">笔触大小<span class="closeBtn"></span></div> <div class="sizes"> <div class="lineSizes"><span data-lineWidth="10" data-text="大笔" class="big"></span></div> <div class="lineSizes"><span data-lineWidth="30" data-text="中笔" class="middle"></span></div> <div class="lineSizes"><span data-lineWidth="50" data-text="小笔" class="small"></span></div> </div> </div> <div class="pop-up bg-panel"> <div class="title">推荐背景<span class="closeBtn"></span></div> <div class="list"> <img src="images/white.jpg" alt="" /> <img src="images/white.jpg" alt="" /> <img src="images/white.jpg" alt="" /> <img src="images/white.jpg" alt="" /> <img src="images/white.jpg" alt="" /> </div> </div>  <div class="pop-up rubber-panel"> <div class="title">橡皮檫大小<span class="closeBtn"></span></div> <div class="rubbers"> <div class="first">大小：</div> <div class="second"><input type="range" min="1" max="50" value="25" step="1" name="大小" /></div> <div class="last"><span class="rubberSize">25</span>像素</div> </div> </div> <div class="pop-up history-panel"> <div class="title">历史记录<span class="closeBtn"></span></div> <div class="history"> <div class="lineBox"></div> </div> </div> </div> <div class="offImgs" style="display: none;"></div> <script src="js/jquery.min.js"></script> <script src="js/handWriting.js"></script> </body> </html>

评论收藏

内容反馈