canvas 学习
<!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 学习的更多相关文章
- canvas学习之API整理笔记（二）
前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...
- canvas学习(一)
Canvas 学习之路 (一) canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面. 因为对前端无限的爱好,更加对canvas充满好奇,将我学习canvas的 ...
- canvas学习和面向对象(二)
Canvas 学习(二) 上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形. 现在开始绘制图片和动画帧,以及面向对象的升级版本. 还是一样,看代码,所有的代码都托管在git ...
- canvas学习总结六：绘制矩形
在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...
- canvas学习笔记、小函数整理
http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...
- canvas学习（三）：文字渲染
一.绘制基本的文字: var canvas = document.getElementById("myCanvas") var ctx = canvas.getContext('2 ...
- canvas学习（二）：渐变与曲线的绘制
canvas学习(二):渐变与曲线的绘制 一:createLinearGradient()线性渐变: 二:createLinearGradient() 放射状/圆形渐变: 三:createPatter ...
- canvas学习（一）：线条，图像变换和状态保存
canvas学习(一):线条,图像变换和状态保存 一:绘制一条线段: var canvas = document.getElementById('canvas') var ctx = canvas.g ...
- Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- canvas学习之API整理笔记（一）
其实canvas本身很简单,就是去学习它的API,多看实例,多自己动手练习,多总结.但是canvas的API实在是有点多,对于初学者来说,可能学到一半就止步不前了.我也有这种感觉,在学习的过程中,编写 ...
随机推荐
- js学习进阶-页面覆盖
页面覆盖以显示一条信息,照片或者常见的登录,广告, 实例: <!DOCTYPE html> <html> <head> <meta charset=" ...
- .net MVC 简单图片上传
主要完成的是在网页上 上传一张图片到服务器 我搜出来的上传文件代码都特别复杂,对于初学者来说,先解决能上传的问题才最重要,并不需要特别多的功能,仅适合不会上传的初学者,大神请绕路,错误请指出,谢谢 v ...
- Ubuntu架设FTP
1.安装vsftpd >sudo apt-get install vsftpd 2.安装好ftp后默认是会自动创建ftp用户的,然后我们设置ftp用户的密码 >sudo passwd ft ...
- for_each(c++11)
http://www.cplusplus.com/reference/algorithm/for_each/ template<class InputIterator, class Functi ...
- 那些年，坑死自己的事之fread/fwrite
今天继续看牛人做过的东西,这个小程序并不大,加上相当多的注释行,才5000多行.这个小程序是在linux下实现的,之前自己也一直用vi来看并加以更加详细的注释,但是效率实在太低.于是将其转移到wind ...
- 让Git忽略所有obj和bin目录的同步
DotNet的项目里,编译出来的二进制文件默认都是放在每个项目对应的bin和obj目录下,有时候开发人员会不小心把这些目录的文件错误的提交到Git服务器.Git里的忽略文件功能可以通过一个.gitig ...
- scikit-learn算法选择图
图片来自sklearn官网 最近事情弄完一部分了,继续开始python data science!
- MSP430FR4133/4131/4132单片机破解芯片解密多少钱？
德州仪器MSP430FR4133/4131/4132单片机破解芯片解密多少钱? MSP430FR4133.MSP430FR4131.MSP430FR4132 ####[微信:icpojie]#### ...
- HTML5的 input:file上传类型控制
一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文 ...
- C# 单例模式
饿汉, 懒汉模式就不说了,下面是IODH模式 static void Main(string[] args) { Singleton s1, s2; s1 = Singleton.getInstanc ...