<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<style type="text/css">
#mycan {
position: absolute;
left: 400px;
border: 1px solid gray;
}
</style>
</head>
<body>
<canvas id="mycan" height="500" width="500"></canvas>

</body>
</html>
<script type="text/javascript">

var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); };
var canvas = document.getElementById("mycan");
var ctx = canvas.getContext("2d");
var flag = true;
var x, y, r, low;
var dx, dy, ux, uy;//鼠标按下和松开坐标

speed = 5;//设置速度
r = 10;//求大小

$(canvas).bind("mousedown", function (e) {
e = e || event;
dx = e.offsetX;
dy = e.offsetY;

$(canvas).bind("mousemove", function (e) {
e = e || event;
ux = e.offsetX;
uy = e.offsetY;
Createball();
})
})

canvas.onmouseup = function (e) {
$(canvas).unbind("mousemove");
var sx = dx;
var sy = dy;
var speed = Math.sqrt((ux - dx) * (ux - dx) + (uy - dy) * (uy - dy)) / 15;
var jiaodu = Math.atan((uy - dy) / (ux - dx))
var xflag = true, yflag = true;
if (ux - dx > 0) {
xflag = false;
yflag = false;
}
gettran(xflag, speed, jiaodu, sx, sy);
}
function Createball() {
ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.globalAlpha = 0.3;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();

ctx.save()
ctx.beginPath();
ctx.moveTo(dx, dy);
ctx.lineTo(ux, uy);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();
ctx.closePath();
ctx.restore();
}

function gettran(xflag, speed, jiaodu, sx, sy) {

var xi = 0, yi = 0;
var xflagi = xflag;
var yflagi = xflag;
var speedi = speed;
var jiaodui = jiaodu;
var sxi = sx;
var syi = sy;
var low = 0.01;
var s = setInterval(function () {
x = xi * Math.cos(jiaodu);
y = yi * Math.sin(jiaodu);
if (x > 500 - sxi - r) {
xflagi = false;
}
if (x < r - sxi) {
xflagi = true;
}
if (y > (500 - syi * 1 - r * 1)) {
yflagi = false;
if (Math.sin(jiaodui) < 0) {
yflagi = true;
}
}
if (y < (r * 1 - syi * 1)) {
yflagi = true;
if (Math.sin(jiaodui) < 0) {
yflagi = false;
}
}

if (speedi - low <= 0) {
low = speedi;
ctx.save()
ctx.beginPath();
ctx.translate(sxi + x * 1, syi + y * 1);
ctx.clearRect(-r - 1, -r - 1, 2 * r + 2, 2 * r + 2);
ctx.closePath();
ctx.restore();
clearInterval(s)
}
else {
low += 0.03;
ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.globalAlpha = 0.3;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();

ctx.save()
ctx.beginPath();
ctx.translate(sxi + x * 1, syi + y * 1);
ctx.arc(0, 0, r, Math.PI * 2, 0);
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.fill();
ctx.closePath();
ctx.restore();
}
xflagi == true ? xi += speedi - low : xi -= speedi - low;
yflagi == true ? yi += speedi - low : yi -= speedi - low;
}, 1000 / 60)
}

</script>

canvas 学习的更多相关文章

  1. canvas学习之API整理笔记（二）

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  2. canvas学习(一)

    Canvas 学习之路 (一) canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面. 因为对前端无限的爱好,更加对canvas充满好奇,将我学习canvas的 ...

  3. canvas学习和面向对象(二)

    Canvas 学习(二) 上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形. 现在开始绘制图片和动画帧,以及面向对象的升级版本. 还是一样,看代码,所有的代码都托管在git ...

  4. canvas学习总结六：绘制矩形

    在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...

  5. canvas学习笔记、小函数整理

    http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...

  6. canvas学习（三）：文字渲染

    一.绘制基本的文字: var canvas = document.getElementById("myCanvas") var ctx = canvas.getContext('2 ...

  7. canvas学习（二）：渐变与曲线的绘制

    canvas学习(二):渐变与曲线的绘制 一:createLinearGradient()线性渐变: 二:createLinearGradient() 放射状/圆形渐变: 三:createPatter ...

  8. canvas学习（一）：线条，图像变换和状态保存

    canvas学习(一):线条,图像变换和状态保存 一:绘制一条线段: var canvas = document.getElementById('canvas') var ctx = canvas.g ...

  9. Canvas学习：封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  10. canvas学习之API整理笔记（一）

    其实canvas本身很简单,就是去学习它的API,多看实例,多自己动手练习,多总结.但是canvas的API实在是有点多,对于初学者来说,可能学到一半就止步不前了.我也有这种感觉,在学习的过程中,编写 ...

随机推荐

  1. Lintcode 157. 判断字符串是否没有重复字符

    ------------------------ 因为字符究竟是什么样的无法确定(比如编码之类的),恐怕是没办法假设使用多大空间(位.数组)来标记出现次数的,集合应该可以但感觉会严重拖慢速度... 还 ...

  2. Learn ES2015

    折腾了大半年的项目,用的angular折腾快疯了. 总算有个小结了.正好闲下来为新的项目做准备,学点新的玩意玩玩,以往ES6都没用过,感觉被大部队甩好远了,抓紧跟上大部队的脚步... 1.利用let和 ...

  3. ubuntu安装vim时提示 没有可用的软件包 vim，但是它被其它的软件包引用了 解决办法

    ubuntu安装vim时提示 没有可用的软件包 vim-gtk3,但是它被其它的软件包引用了 解决办法 本人在ubuntu系统安装vim  输入 sudo apt-get install vim 提示 ...

  4. echarts之tooltip-position

    当postion为Array时 tooltip : { trigger: 'axis', position:[3,3] //赋予一个[x,y]的位置 } 当postion为function时 tool ...

  5. [RESTful]HTTP状态码

    HTTP状态码是一个依附于HTTP响应的3位数字,它是协议语义的一部分,能在最基本的层面上让客户端知道服务器在尝试处理请求的时候发生了什么事情.HTTP规范总共定义了41一个响应码,本文将对所有的状态 ...

  6. python 爬虫（五）

    下载媒体文件 I 使用urllib.request.urlretrieve方法可以下载文件存为指定文件 from urllib.request import urlretrieve from urll ...

  7. 用js把数据从一个页面传到另一个页面

    用js把数据从一个页面传到另一个页面的层里? 如果是传到新页面的话,你网站基于什么语言开发直接用get或者post获取,然后输出到这个层 通过url传参 如果是HTML页面的话JS传到新页面就wind ...

  8. brew管理node的版本

    摘要 nvm可以.brew怎么去切换不同的node版本 转载请注明出处:http://my.oschina.net/uniquejava/blog/491030 brew详解:http://stack ...

  9. 关闭rdlc报表打印预览后，关闭客户端，抛出异常“发生了应用程序级的异常 将退出”

    问题:关闭rdlc报表打印预览后,关闭客户端,抛出异常“发生了应用程序级的异常 将退出” 办法:在容纳ReportViewer的窗体后台代码中,添加如下代码即可 protected override ...

  10. PNG-8和PNG-24的抉择

    今天我做了一个图,因为需要透明,所以我存为了PNG8格式,结果发现图片变了,图片变得四周都不光滑了,四周都变得有锯齿了,而且阴影也不见了,后来存为PNG24,这些问题就消失了.我去百度搜索了关于PNG ...