var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var centerX=canvas.width/2;
var centerY=canvas.height/2;
function ball(x,y,radius,speed){
this.x=x;
this.y=y;
this.radius=radius;
this.speed=speed;
}
var speed={x:0,y:0}
var b=[];
b.push(new ball(centerX,centerY,150,speed))
function draw(){
var d=b[0];
cxt.clearRect(0,0,canvas.width,canvas.height)
cxt.beginPath();
cxt.arc(d.x,d.y,d.radius,0,Math.PI*2,true);
cxt.fillStyle="red";
cxt.fill();
cxt.closePath()
}
draw();
function isMoveUpBall(d,x,y){
var dx=x-d.x;
var dy=y-d.y;
var dist=Math.sqrt(dx*dx+dy*dy);
return dist<d.radius;
}
function isMoveUp(body,x,y){
return x>body.x && x<body.x+body.width && y>body.y && y<body.height+body.y;
}
var isUp=1;
var d=b[0];
var oldX = 0;
var oldY = 0;
function move(event){
var x=event.point.x,y=event.point.y;
var body={x:d.x-d.radius,y:d.y-d.radius,width:d.radius*2,height:d.radius*2};
if(isUp==0 && isMoveUpBall(d,x,y))
{
console.log(oldX,oldY)
d.x = x+(-oldX);
d.y = y+(-oldY);
d.speed.x = d.x - oldX;
d.speed.y = d.y - oldY;
}
draw();
}
var CsX=centerX,CsY=centerY;
function up(event){
isUp=1;
CsX=d.x;
CsY=d.y;
console.log(CsX,CsY)
}
function down(event){
isUp=0;
oldX = event.point.x-CsX;
oldY = event.point.y-CsY;
draw();
}
tool.MT(canvas,move,down,up);

canvas拖动的更多相关文章

  1. win10 uwp 拖动控件

    我们会使用控件拖动,可以让我们做出好看的动画,那么我们如何移动控件,我将会告诉大家多个方法.其中第一个是最差的,最后的才是我希望大神你去用. Margin 移动 我们可以使用Margin移动,但这是w ...

  2. Cocos Creator学习四:按钮响应事件

    1.方法一:通过编辑器对cc.Button的属性进行拖放操作进行控制 (1)创建脚本BtnClick1.js,增加btnClick1函数,然后拖放到Canvas节点中(记得拖放,否则下面步骤将找不到对 ...

  3. 2018-8-10-win10-uwp-拖动控件

    原文:2018-8-10-win10-uwp-拖动控件 title author date CreateTime categories win10 uwp 拖动控件 lindexi 2018-08-1 ...

  4. canvas实现拖动页面时显示窗口视频

    简介 当前主流的视频网站目前有不少新鲜好玩的功能,最明显的莫过于小视频的显示--当视频不在当前视口范围 时,会在右下角用一个小窗口来显示当前的视频,而且可以拖拽. 今晚心血来潮,起了动手试试的念头.我 ...

  5. 利用 canvas 破解 某拖动验证码

    利用 canvas 破解 某拖动验证码 http://my.oschina.net/u/237940/blog/337194

  6. 实现鼠标拖动canvas绘制的图片

    不啰嗦上代码: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...

  7. html5 canvas画图之图形随拖动而复制(有操作指示)

    学习html5 canvas,写了一个小练习来加深理解,可以实现图形随拖动而复制. <!DOCTYPE html> <html> <head> <meta c ...

  8. Canvas中鼠标获取元素并拖动技术

    Silverlight拖动,需要Canvas. Canvas管网定义: 定义一个区域,在该区域中可以使用相对于该区域的坐标显式定位子元素. XAML <Canvas ...> oneOrM ...

  9. WPF 窗体中的 Canvas 限定范围拖动 鼠标滚轴改变大小

    xaml代码: <Canvas Name="movBg"> <Canvas.Background> <LinearGradientBrush EndP ...

随机推荐

  1. Azure 删除VHD时报错:There is currently a lease on the blob and no lease ID was specified in the request

    可下载:http://clumsyleaf.com/products/cloudxplorer 然后在Accounts中新建一个Account,账号与Key,可在相应的storage Manage A ...

  2. 理解 Linux 网络栈(1):Linux 网络协议栈简单总结

    本系列文章总结 Linux 网络栈,包括: (1)Linux 网络协议栈总结 (2)非虚拟化Linux环境中的网络分段卸载技术 GSO/TSO/UFO/LRO/GRO (3)QEMU/KVM + Vx ...

  3. 一起来啃书——PHP看书

    形式所迫,不得不开展android的学习,PHP这边也开始了啃书的日子.两部500+的书,45天够不,有点忙有点忙... 早上的胃胀,简直是一记闷棍,长点儿记性吧........ 1.PHP+MYSQ ...

  4. 设计模式——抽象工厂模式及java实现

    设计模式--抽象工厂模式及java实现 设计模式在大型软件工程中很重要,软件工程中采用了优秀的设计模式有利于代码维护,方便日后更改和添加功能. 设计模式有很多,而且也随着时间在不断增多,其中最著名的是 ...

  5. POJ1384Piggy-Bank[完全背包]

    Piggy-Bank Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 10787   Accepted: 5258 Descr ...

  6. Java正则获取邮箱

    实现思路 1.使用Java.net.URL对象,绑定网络上某一个网页的地址 2.通过java.net.URL对象的openConnection()方法获得一个HttpConnection对象 3.通过 ...

  7. java 23 - 3 单例模式实现Runtime类

    Runtime:每个 Java 应用程序都有一个 Runtime 类实例,使应用程序能够与其运行的环境相连接. 其中一个方法: exec(String command) 在单独的进程中执行指定的字符串 ...

  8. gnuplot 的安装

    需要同时安装gnuplot和gnuplot-x11才能画出图 sudo apt-get install gnuplot gnuplot-x11 gnuplot not showing the grap ...

  9. HTML 学习笔记 CSS样式(定位)

    CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...

  10. XAMPP部署

    1,直接从官网上下载,然后安装即可 2,出现的问题: a,启动Apache服务器的时候,出现打开端口失败,原因80号端口已被占用,解决方案,更改config文件,将端口设置为8090 b,给phpmy ...