原生JS使用Canvas实现拖拽式绘图功能_js拖拽绘图

canvas

120 浏览量更新于2023-05-11 评论 1 收藏 92KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

原生原生JS使用使用Canvas实现拖拽式绘图功能实现拖拽式绘图功能

主要介绍了原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,本文

通过实例代码给大家介绍的非常详细，需要的朋友可以参考下

一、实现的功能一、实现的功能

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

标点和半径）等实体

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

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

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

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

5、清空绘制功能

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

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

二、完整实现代码二、完整实现代码

DrawingTools =(function(){

//公共方法

var getDom=function(id){return document.getElementById(id)};

var isNull=function(s){return s==undefined||typeof(s)=='undefined'||s==null||s=='null'||s==''||s.length<1};

var hideDefRM=function(){document.oncontextmenu=function(){return false}};//屏蔽浏览器默认鼠标事件

/**绘图容器*/

var cbtCanvas;

/**绘图对象*/

var cxt;

/**绘制的图形列表*/

var shapes=new Array();

var graphkind={'cursor':0,'pen':1,'line':2,'trian':3,'rect':4,'poly':5,'circle':6,'arrow':21,'parallel':41,'trapezoid':42};

//背景图片绘制配置

var bgPictureConfig={

pic:null,//背景图片地址或路径

repaint:true,//是否作为永久背景图，每次清除时会进行重绘

};

//加载并绘制图片(src:图片路径或地址),默认重绘背景图

var loadPicture=function(src){

if(isNull(bgPictureConfig.repaint)||bgPictureConfig.repaint){bgPictureConfig.pic=src}

var img = new Image();

img.onload = function(){cxt.drawImage(img,0,0)}

img.src =src;

}

//绘图基础配置

var paintConfig={lineWidth:1,//线条宽度，默认1

strokeStyle:'red',//画笔颜色，默认红色

fillStyle:'red',//填充色

lineJoin:"round",//线条交角样式，默认圆角

lineCap:"round",//线条结束样式，默认圆角

};

//重新载入绘制样式

var resetStyle=function(){

cxt.strokeStyle=paintConfig.strokeStyle;

cxt.lineWidth=paintConfig.lineWidth;

cxt.lineJoin=paintConfig.lineJoin;

cxt.lineCap=paintConfig.lineCap;

cxt.fillStyle=paintConfig.fillStyle;

}

//鼠标图形

var cursors=['crosshair','pointer'];

/** 切换鼠标样式*/

var switchCorser=function(b){

cbtCanvas.style.cursor=((isNull(b)?isDrawing():b)?cursors[0]:cursors[1]);

}

//操作控制变量组

var ctrlConfig={

kind:0,//当前绘画分类

isPainting:false,//是否开始绘制

startPoint:null,//起始点

cuGraph:null,//当前绘制的图像

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余8页未读，立即下载

weixin_38678406

粉丝: 5
资源: 948

会员权益专享

原生JS使用Canvas实现拖拽式绘图功能

评论0

会员权益专享

最新资源

原生JS使用Canvas实现拖拽式绘图功能

评论0

通过js实现拖动画图，可以画出不同形状，还有颜色

一个好用的线条跟随鼠标移动的canvas效果

js绘图，绘制各种图形，纯js

原生js canvas小游戏

原生小程序canvas

canvas 绘图 实现拖拉拽

three.js+原生js+jquery实现3d

JavaFX技巧2：使用Canvas API进行清晰绘图

微信小程序使用canvas实现文稿效果

vue 3使用原生canvas_vue使用canvas清空

在页面中使用HTML5绘图标签canvas，实现一个绘图板交互功能

微信小程序使用canvas实现签名功能

用html/js/canvas实现圣诞老人和麋鹿

vue canvas二进制绘图

vue3加原生canvas实现抖音头像抠图和预览

vue3中原生js配合canvas实现头像裁剪上传

使用canvas实现一个电子签名功能

使用前端canvas实现

vue 使用原生canvas_vue使用canvas签名之清空和保存

js中的canvas实现屏幕截取

会员权益专享

最新资源

canvas 绘图实现拖拉拽