<!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. Java 判断时间是否在指定天数之内

    import java.util.Date; import java.text.SimpleDateFormat; public class WriteForBlog { static private ...

  2. fibonacci数列（五种）

    自己没动脑子,大部分内容转自:http://www.jb51.net/article/37286.htm 斐波拉契数列,看起来好像谁都会写,不过它写的方式却有好多种,不管用不用的上,先留下来再说. 1 ...

  3. CMS系统存储路径

    CMS系统特点:前后端分离 index.html 首页文件index.php 管理后台的页面 api文件夹: 提供的接口 caches文件夹: 缓存文件 html文件夹:  生成的静态页面 phpcm ...

  4. Django框架-目录文件简介

    Rhel6.5 Django1.10 Python3.5 Django框架-目录文件简介 1.介绍Django Django:一个可以使Web开发工作愉快并且高效的Web开发框架. 使用Django, ...

  5. 【Java EE 学习 68】【单点登录】【两种单点登录类型:SSO/CAS、相同一级域名的SSO】

    单点登录:SSO(Single Sign On) 什么是单点登录:大白话就是多个网站共享一个用户名和密码的技术,对于普通用户来说,只需要登录其中任意一个网站,登录其他网站的时候就能够自动登陆,不需要再 ...

  6. [MS SQL Server]SQL Server如何开启远程访问

    在日常工作中,经常需要连接到远程的MS SQL Server数据库中.当然也经常会出现下面的连接错误. 解决方法: 1. 设置数据库允许远程连接,数据库实例名-->右键--->属性---C ...

  7. Linux内核：kthread_create(线程)、SLEEP_MILLI_SEC

    转自:http://blog.csdn.net/guowenyan001/article/details/39230181 一.代码 #include <linux/module.h> # ...

  8. C++预定义宏

    C/C++宏体中出现的#,#@,##: - #的功能是将其后面的宏参数进行字符串化操作(stringfication),就是对它所引用的宏变量通过替换后在其左右各加上一个双引号 -##被称为连接符(c ...

  9. 【积累篇：他山之石，把玉攻】Mime 类型列表

    按照内容类型排列的 Mime 类型列表 类型/子类型 扩展名 application/envoy evy application/fractals fif application/futurespla ...

  10. local variable 'r' referenced before assignment

    这个错误是说r在使用前没有定义 def cateToNum(c): if c == 'M PRO': r = 1 if c == 'F PRO': r = 2 if c == 'M PREMIER': ...