canvas拖动
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拖动的更多相关文章
- win10 uwp 拖动控件
我们会使用控件拖动,可以让我们做出好看的动画,那么我们如何移动控件,我将会告诉大家多个方法.其中第一个是最差的,最后的才是我希望大神你去用. Margin 移动 我们可以使用Margin移动,但这是w ...
- Cocos Creator学习四:按钮响应事件
1.方法一:通过编辑器对cc.Button的属性进行拖放操作进行控制 (1)创建脚本BtnClick1.js,增加btnClick1函数,然后拖放到Canvas节点中(记得拖放,否则下面步骤将找不到对 ...
- 2018-8-10-win10-uwp-拖动控件
原文:2018-8-10-win10-uwp-拖动控件 title author date CreateTime categories win10 uwp 拖动控件 lindexi 2018-08-1 ...
- canvas实现拖动页面时显示窗口视频
简介 当前主流的视频网站目前有不少新鲜好玩的功能,最明显的莫过于小视频的显示--当视频不在当前视口范围 时,会在右下角用一个小窗口来显示当前的视频,而且可以拖拽. 今晚心血来潮,起了动手试试的念头.我 ...
- 利用 canvas 破解 某拖动验证码
利用 canvas 破解 某拖动验证码 http://my.oschina.net/u/237940/blog/337194
- 实现鼠标拖动canvas绘制的图片
不啰嗦上代码: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...
- html5 canvas画图之图形随拖动而复制(有操作指示)
学习html5 canvas,写了一个小练习来加深理解,可以实现图形随拖动而复制. <!DOCTYPE html> <html> <head> <meta c ...
- Canvas中鼠标获取元素并拖动技术
Silverlight拖动,需要Canvas. Canvas管网定义: 定义一个区域,在该区域中可以使用相对于该区域的坐标显式定位子元素. XAML <Canvas ...> oneOrM ...
- WPF 窗体中的 Canvas 限定范围拖动 鼠标滚轴改变大小
xaml代码: <Canvas Name="movBg"> <Canvas.Background> <LinearGradientBrush EndP ...
随机推荐
- KVM 介绍(8):使用 libvirt 迁移 QEMU/KVM 虚机和 Nova 虚机 [Nova Libvirt QEMU/KVM Live Migration]
学习 KVM 的系列文章: (1)介绍和安装 (2)CPU 和 内存虚拟化 (3)I/O QEMU 全虚拟化和准虚拟化(Para-virtulizaiton) (4)I/O PCI/PCIe设备直接分 ...
- Virtual Box常用指令
以下操作需在命令行里将当前路径设为 Virtual Box安装目录 1. 调整磁盘大小(只能调整动态分配的.vdi格式文件) VBoxManage modifyhd "xxx.vdi&quo ...
- 《Invert》开发日志01:核心玩法设计
前面提过,这个游戏的核心玩法基于我做的第一个Unity游戏,名字就叫<Invert>,现在在应用宝上面还能搜到.不过那个游戏也不是我原创的,它的玩法设计来自github上的一个开源项目(h ...
- android camera setMeteringArea详解
摘要: 本文为作者原创,未经允许不得转载:原文由作者发表在博客园:http://www.cnblogs.com/panxiaochun/p/5802814.html setMeteringArea() ...
- 单机搭建Android开发环境(五)
前文介绍了Android系统开发环境的搭建,本文将简单介绍Android应用开发环境的搭建. 基于Android Studio搭建应用开发环境,相比使用Eclipse简单得多.Android Stud ...
- ActionErrors和ActionError
**ActionErrors和ActionError都是ActionMessage的子类,ActionError存放在 ActionErrors中,ActionError对象中的参数为配置文件中配置的 ...
- USACO Sorting a Three-Valued Sequence
题目描述 排序是一种很频繁的计算任务.现在考虑最多只有三值的排序问题.一个实际的例子是,当我们给某项竞赛的优胜者按金银铜牌排序的时候.在这个任务中可能的值只有三种1,2和3.我们用交换的方法把他排成升 ...
- java 访问sql server数据库
控制面板--管理工具—ODBC数据源(64位)--系统DNS—添加(名称为“test”,服务器填“.”描述随意) 这里访问的数据库为AdventuerWorks 数据源配置好后可以测试一下,下面是ja ...
- flex sdk中mx_internal function getTextField() 这种函数如何调用?
在用flex 开发中,一些函数前打上了 mx_internal 外部调用不了,其实这样写就可以了 xxx.mx_internal::getTextField() 而 xxx.getTextField( ...
- Hoj2634 How to earn more?
How to earn more My Tags (Edit) Source : ww Time limit : 1 sec Memory limit : 64 M Submitted ...