使用canvas和js实现多种图形拖动效果

最新推荐文章于 2024-06-17 14:58:27 发布
最新推荐文章于 2024-06-17 14:58:27 发布
阅读量2.4k 收藏 4
点赞数
文章标签： canvas 图形 javascript 圆 多边形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29507033/article/details/52459225
版权

<!doctype html>

<html>
<head>
    <title> </title>
    <meta http-equiv="X-UA-Compatible" content="IE=9"> 
    <meta charset="utf-8" />
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <style>
      *{
        margin:0px;padding:0px;font-family: 微软雅黑;
    }
    #grap_main{
        width: 80%;
        height: 80%;
    }
    #grap_top{
        height: 20%;
        width: 100%;
    }
    #grap_bot{
        height: 75%;
        width: 100%;
        background-color: #F5F2EC;
    }
    canvas{border:dashed 0px #CCC}
    </style>
</head>
<body>

<div id="grap_main">
    <!--上面按钮选择-->
    <div id="grap_top">
    
        <input type="button" value="circular" οnclick="drawCir()"/>
        <input type="button" value="square" οnclick="drawSqu()"/>
        <input type="button" value="triangle" οnclick="drawTri()">
    </div>


    <!--底部图形编辑-->
    <div id="grap_bot">
<canvas id="strCanvas" width="100" height="100" style="position:absolute;left:100px;top:100px"></canvas>

<canvas id="squCanvas" width="100" height="100" style="position:absolute;left:275px;top:100px"></canvas>

<canvas id="tricanvas" width="100" height="100" style="position:absolute;left:450px;top:100px"></canvas>


    </div>
</div>
    <script type="text/javascript">
var tenp =1;
var i=1;
function addIndex(a){
a.style.zIndex=tenp+i;
i++;
}

//圆形
function drawCir(){
        var can =document.getElementById("strCanvas");
        var cans = can.getContext('2d');
        cans.beginPath();
        cans.arc(50,50,50,0,Math.PI*2,true);
        //cans.closePath();
        cans.fillStyle = 'green';
        cans.fill();

        //设置拖动
drag(can);

    }

//矩形
    function drawSqu(){
        var divObj =document.getElementById("squCanvas");
        var context = divObj.getContext('2d');
        context.beginPath();
        context.fillStyle = "blue";
        context.rect(0,0,100,100);
        context.closePath();
        context.fill();


        
        drag(divObj);
}


//画三角形
function drawTri(){
var canvas=document.getElementById("tricanvas");
var cxt=canvas.getContext("2d");
//填充或闭合 需要先闭合路径才能画
cxt.moveTo(50,0);
cxt.lineTo(0,100);
cxt.lineTo(100,100);
cxt.closePath();
cxt.strokeStyle="red";
cxt.fill();

drag(canvas);
}



//公共的拖拽方法
function drag(divObj){

// 绘制图片坐标
var X=0;
var Y=0;
// js部分
//var divObj=document.getElementById("strCanvas");
var moveFlag=false;
//区别moueseup与click的标志
var clickFlag=false;


//得到点击的坐标
function getEventPosition(ev){
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
}else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return {x: x, y: y};
}

// 拖拽函数
divObj.οnmοusedοwn=function(e){
var cans = divObj.getContext('2d');
//用isPointInPath方法
var p = getEventPosition(e);

if(cans.isPointInPath(p.x, p.y)){
//点击了矩形

moveFlag=true;
clickFlag=true;
var clickEvent=window.event||e;
var mwidth=clickEvent.clientX-divObj.offsetLeft;
var mheight=clickEvent.clientY-divObj.offsetTop;
document.οnmοusemοve=function(e){
clickFlag=false;
var moveEvent=window.event||e;
if(moveFlag){
//移动则z-index变大
addIndex(divObj);
divObj.style.left=moveEvent.clientX-mwidth+"px";
divObj.style.top=moveEvent.clientY-mheight+"px";
//将鼠标坐标传给Canvas中的图像
X=moveEvent.clientX-mwidth;
Y=moveEvent.clientY-mheight;
//下面四个条件为限制div以及图像的活动边界
if(moveEvent.clientX<=mwidth){
 divObj.style.left=0+"px";
 X=0;
}
if(parseInt(divObj.style.left)+divObj.offsetWidth >=1366){
 divObj.style.left=1366 - divObj.offsetWidth+"px";
 X=1366 - divObj.offsetWidth;
}
if(moveEvent.clientY<=mheight){
 divObj.style.top=0+"px";
 Y=0;
}
if(parseInt(divObj.style.top)+divObj.offsetHeight>=768){
 divObj.style.top=768-divObj.offsetHeight+"px";
 Y=768-divObj.offsetHeight;
}
divObj.οnmοuseup=function(){
moveFlag=false;
}
}
}
}
}

}

</script>
</body>
</html>
qq_29507033
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
javascript利用canvas实现鼠标拖拽功能
12-28
利用canvas实现鼠标拖拽功能，当在元素上按下鼠标并移动时，元素跟着鼠标移动。 效果： 主要思路： 当鼠标按下时，用isPointInPath方法判断鼠标位置是否在元素上，如果在则鼠标移动时元素跟着移动；当鼠标抬起时，将鼠标移动事件和抬起事件置空。 代码如下： <canvas id=can width=400 height=400></canvas> [removed] var can = document.getElementById(can); var ctx = can.getContext(2d); //创建
原生JS使用Canvas实现拖拽式绘图功能
10-16
主要介绍了原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
JS canvas绘制能拖动和缩放的球
点滴积累
12-05 2465
目的：为了将一些数据点集数据展示到页面上，可以使用鼠标缩放和拖动；是不是有点抽象，那，可以想象一下百度/高德地图上的效果，绘制了一些地形和路标： - 拖动：可以查看相邻位置和更远位置的地形； - 缩放：可以更清晰的查看当前位置。当然了，我要做的并没有地图那么完美和复杂，但是麻雀虽小，该有的基本逻辑也都是有的，今下来，记录一下开发(研究)过程：【1】 绘制一个支持拖动的球 (gif图没录好，就先用
用canvas绘制简单的几何图形
qq_57220516的博客
03-06 599
canvas的基本操作，简单的几何图形，没有废话，一看就会
canvas实现画布拖拽效果 适配Uniapp和Vue (开箱即用)
最新发布
2303_77072102的博客
06-17 786
需求:我司是做AIGC项目最近和地铁项目有关需要实现海报效果图，并且需要使用画布拖拽和修改上传删除等等功能 当时连续加班花了10个工作日搓出来 实现挺简单的但是Canvas数据处理还是挺麻烦的 大概功能如图下首先我们需要引入Fabric.js 这个库封装好了原生的Canvas的Api使用uniapp和vue项目。
Canvas多边形的绘制与拖动处理12
编程是一门实践技术
05-19 575
canvas系列之12。
原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能，有实例Demo
eguid音视频技术分享（JavaCV教程、FFmpeg教程、openCV图像处理教程、音视频教程）
11-07 9769
前言 需要用到图形绘制，没有找到完整的图形绘制实现，所以自己实现了一个 - - 演示地址：查看演示DEMO 新版本支持IE5+（你没看错，就是某软的IE浏览器）以上任意浏览器的Canvas绘图：http://blog.csdn.net/eguid_1/article/details/79310269 项目维护于github：https://github.com/eguid/graff...
canvas实现弧形可拖动进度条效果
08-30
Canvas的主要特点是可以使用JavaScript动态地绘制图形，实现了与用户的交互。 知识点2： 创建Canvas对象 在HTML中创建一个Canvas标签：<canvas id="canvas" width="400" height="400"></canvas> 知识点3： 获取...
javascript轻量级库createjs使用Easel实现拖拽效果
10-22
【创建JavaScript轻量级库CreateJS使用Easel实现拖拽效果】 CreateJS是一个强大的JavaScript库，专注于HTML5的互动内容开发。它由一系列独立但相互兼容的模块组成，包括EaselJS、TweenJS、SoundJS和PreloadJS，分别...
想实现Canvas元素拖拽？速来一探究竟，你也可以轻松做到！
qq_39222910的博客
03-25 1789
经过上面的事件监听和封装，自定义事件就比较简单了，只需要做到三件事即可，传递事件、绑定到元素上、触发即可。封装类说明初始化流程说明。
html页面，js利用canvas绘制拖动和缩放球体
12-05
html页面，js利用canvas绘制拖动和缩放球体。 鼠标选中或者未选中球体都可以拖动和缩放画布
Draw2js一个基于h5canvas实现的简单图形引擎
08-10
Draw2.js 一个基于h5 canvas实现的简单图形引擎。
原生js实现canvas画布中绘制、移动、拖拽、删除矩形（如简易截图工具）
xiaohuli_hyr的博客
11-24 4539
功能描述 待图片上传并加载完成后，重新生成画布； 鼠标在画布区域内绘制，移动，拖拽，删除矩形（如截图工具一般）； isboundary() 判断是否需要判断边界问题，默认false。 效果截图 实现代码 vue页面 – 注意：原本canvas不支持键盘事件，为canvas加上tabindex=0，转为HTML5 DOM元素，方可支持键盘事件 <div class="phone-content"> <img class="phone-bg-image" ref="ph
如何实现Canvas图像的拖拽、点击等操作
weixin_30955617的博客
07-09 1211
上一篇Canvas的博文写完后，有位朋友希望能对Canvas绘制出来的图像进行点击、拖拽等操作，因为Canvas绘制出的图像能很好的美化。好像是想做炉石什么的游戏，我也没玩过。 Canvas在我的理解中就好像在一张画布上绘制图像，它只能看到却“摸”不到，那要如何进行操作呢。我不知道网上是怎么做的，这里用自己的想法做了个DEMO分享给大家。 思路： 虽然Canvas不能拖拽，但div可以拖拽，...
canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备
weixin_33896069的博客
02-01 734
写在前面 本文首发于公众号：符合预期的CoyPan 最近做了一个移动端活动页的需求，大概就是diy一个页面。用户可以对物料进行拖动、缩放、旋转，来达到diy的目的。用DOM来实现是不现实的，我采用了canvas来实现和用户的交互。开发过程中，涉及到了canvas中对物料元素的拖动、缩放、旋转等。本文将详细介绍在不使用任何第三方库的情况下...
Canvas绘图拖拽
越陌度阡
06-16 1357
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Canvas绘图拖拽</title> <style type="text/css"> * { margin: 0; ...
js实现canvas绘制的图形的拖动效果
lgdshr123的博客
07-07 7111
最近在学习canvas突然发现canvas的元素也可以实现拖动，原来写过DOM元素的拖动效果，感觉挺简单的，所以自己试着写了一个在canvas里拖动绘制图形的效果。 首先得先在canvas里绘制一个我们想要操作的图形，这时候就要用canvas的绘制功能了，绘制代码如下： <canvas width="400" height="400" id="cvs"></canvas> var o
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值