<!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. Tensorflow- tensor的列操作

    几个point [:,i]类似python直接的index 列操作是可行的, 注意i不能是variable,如果是使用slice slice操作会保持和输入tensor一样的shape 返回 而1对应 ...

  2. jQuery中的Ajax - Codeigniter版本

    发送(view中): $.ajax({ type : 'post', url : 'add', data : { 'nickname':nickname, 'mobile':mobile, 'sex' ...

  3. PHP AES的加密解密

    AES加密算法 密码学中的高级加密标准(Advanced Encryption Standard,AES),又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准用来替代原先的DE ...

  4. 【Java EE 学习 79 上】【mybatis 基本使用方法】

    一.简介 mybatis类似于hibernate,都是简化对数据库操作的框架,但是和hibernate不同的是,mybatis更加灵活,整体来说框架更小,这体现在它需要我们手写SQL语句,而hiber ...

  5. HP-SOCKET TCP/UDP通信框架库解析

    项目概述: HP-SOCKET是一套通用TCP/UDP通信框架,包括服务器.客户端.Agent组件:其目标是提供高性能.通用性.简易性.可扩展.可定制: 鉴于此,其仅实现基本的通用框架通信.数据收发功 ...

  6. 浅析/dev/shm

    一,/dev/shm 概念 /dev/shm 是一个tmpfs文件系统,临时文件系统,是基于内存的文件系统,也就是说/dev/shm中的文件是直接写入内存的,而不占用硬盘空间. 在Centos和Red ...

  7. MySQL和Lucene索引对比分析

    MySQL和Lucene都可以对数据构建索引并通过索引查询数据,一个是关系型数据库,一个是构建搜索引擎(Solr.ElasticSearch)的核心类库.两者的索引(index)有什么区别呢?以前写过 ...

  8. CozyRSS开发记录14-RSS源管理初步完工

    CozyRSS开发记录14-RSS源管理初步完工 1.添加源的响应 DialogHost.Show有几个版本的重载,加一个DialogClosingEventHandler参数.我们让添加源对话框的添 ...

  9. Flash: An Efficient and Portable Web Server

    Introduction This paper presents the design of a new Web server architecture called the asymmetric m ...

  10. [原创]Centos7 从零编译配置Memcached

    序言 Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度. Memca ...