关于控制canvas图形思路解析

canvas

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：限知识深度，本文章思路不一定为最优解，但可以实现功能

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、canvas是什么？

canvas是HTML5标准中的一个元素，javascript为其提供了一些绘图API，通过canvas生成的图像是栅格形式的，即像素图像，与VML和SVG生成的矢量图像不同。 canvas是一个HTML中的元素，所以它能够与浏览器渲染引擎紧密结合、节约资源，简化了图形和网页中其他元素的交互过程。 而且可以像操作普通 HTML 元素一样操作canvas。开发人员可以将所有的代码整齐的写在一个文件里，降低了维护与更新的难度。 canvas绘制过程 •获取上下文。 •开始绘制。 •指定每根线条和每个填充的颜色。 •定义形状。 •完成绘制。

二、使用步骤

实现控制

原则上canvas画出的图形是不能被控制的，不能被选中，画出来的是一个整体，所以想要控制画出来的图形做出变化就需要重新绘制。
1.首先对要绑定一个点击事件，获取在canvas上面的点击位置，这样就假装canvas有点击事件，并且知道了需要改动哪里的图像。
2.因为每一段图像都有绘制的代码，假如你点击canvas上面的一部分想要删除点击的canvas图像，因为从点击点得知你想要删除的是那条线（横向和纵向坐标获取到了），就擦除画的这条线，
3.假如你想拖动canvas上的图，还是根据点击的位置，确认点击的图像，绘制图像一般是使用数组循环的数据，这样的话修改数组里面的数据就能做到修改图像

总结

canvas无法对已绘制的图像进行操作、修改，也就是说获取不到canvas中的某一个图像，但是SVG可以，因为在SVG所渲染的图像中，单个的图像都是一个DOM元素，我们就可以通过CSS和js脚本进行修改和操作。不过，在canvas中我们可以记录其中各个对象的位置，想要的修改某一对象，我们只能是把原来的对象擦除，重新绘制。 canvas中的某一图像“对象”无法像DOM中元素一样来添加事件，只能是通过判断当前事件的坐标是否落在该对象中来进行模拟事件模型；SVG就可以跟为DOM元素添加事件一样，为其中的每一个图像添加事件。