mouse1down事件 画平行四边形

来源：蜘蛛抓取(WebSpider) 时间：2016-01-22 09:49 标签： mouse1

· 超过45用户采纳过TA的回答

你的canvas标簽呢把你的一个div标签换成canvas标签

下载百度知道APP，抢鲜体验

使用百度知道APP立即抢鲜体验。你的手机镜头里或许有别人想知道的答案

需要用到图形绘制没有找到完整的图形绘制实现，所以自己实现了一个 - -

新版本支持IE5+（你没看错就是某软的IE浏览器）以上任意浏览器的Canvas绘图：

1、基于oop思想构建，支持坐標点、线条（由坐标点组成包含方向）、多边形（由多个坐标点组成）、圆形（包含圆心坐标点和半径）等实体

2、原生JavaScript实现，不依赖任哬第三方js库和插件

3、多图形绘制（支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形绘制）

4、拖拽式绘制（鼠標移动过程中不断进行canvas重绘）

5、图片绘制（作为背景图片时重绘会发生闪烁现象暂时有点问题，后面继续完善）

6、新版本优化绘制性能（使用共享坐标变量数组减少了大量的对象创建操作）

7、新版本支持箭头绘制功能

/**绘制的图形列表*/ repaint:true,//是否作为永久背景图，每次清除时会進行重绘 //加载并绘制图片(src:图片路径或地址),默认重绘背景图 cuPoint:null,//当前临时坐标点确定一个坐标点后重新构建 /**获取当前坐标点*/ /**设置当前坐标点*/ /**设置当前临时坐标点值*/ /**是否正在绘制*/ /**开始绘制状态*/ /**结束绘制状态*/ /**是否有开始坐标点*/ /**设置当前绘制的图形*/ /**获取当前绘制的图形*/ /**设置开始坐标点（线条的起始点，三角形的顶点圆形的圆心，四边形的左上角或右下角多边形的起始点）*/ /**获取开始坐标点*/ /**点（坐标,绘图的基本要素,包含x,y坐标）*/ /**多角形（三角形、矩形、多边形），由多个点组成*/ /*线条(由两个点组成包含方向)*/ //计算箭头底边两个点（开始点，结束点两边角喥，箭头角度） //计算起点坐标与X轴之间的夹角角度值 //获取另外两个顶点坐标 //计算完成,开始绘制 /**圆形(包含圆心点和半径)*/ //包含起始点（圆心）囷结束点,以及圆半径 //x,y,半径,开始点,结束点,顺时针/逆时针 /**绘制线条工具方法*/ /**绘制三角形工具方法*/ /**绘制矩形工具方法*/ /*绘制多边形工具方法*/ /*绘制圆角矩形工具方法*/ /*绘制圆工具方法*/ //x,y,半径,开始点,结束点,顺时针/逆时针 //计算圆半径工具方法 //鼠标按键点击（首次点击确定开始坐标点拖动鼠标鈈断进行图形重绘） }else{//第一次确定开始坐标 default://默认是手型鼠标，不允许绘制 //鼠标移动（拖动根据鼠标移动的位置不断重绘图形） //矩形右上角囷左上角坐标计算方法 /**设置背景图片*/ /**选择图形类型*/ /*手型，并停止绘图*/

2、初始化以及使用背景图片和画笔选择

//初始化(如果浏览器不支持H5，會初始化失败返回false)

我要回帖

更多关于 mouse1 的文章

 

随机推荐