Canvas中点到点的路径运动
/*随机生成两个点，然后以两点为端点，进行运动，主要使用了SetInterval,对画布进行不断的擦除描绘的操作*/
1 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<canvas id="dir" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("dir");
var ctx = canvas.getContext("2d");
var org = {
x: Math.random()*canvas.width,
y: Math.random() * canvas.height
};
var now = {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height
};
var newxy = {
x: 0,
y: 0
};
function init() {
ctx.beginPath();
ctx.moveTo(org.x, org.y);
ctx.lineTo(now.x, now.y);
ctx.stroke();
math();
} var i = 1;
function math() {
var wid = Math.abs(now.x - org.x);//x轴的长，绝对值
var hei = Math.abs(now.y - org.y);//y轴长
var length = Math.pow(Math.pow(wid, 2) + Math.pow(hei, 2), 1 / 2);//（长平方＋宽平方）开根 ，其实就是直角三角关系
if (i < length) {//通过SetInterval，按照Length方向每次运行1px
if (org.x < now.x) {
newxy.x = org.x +wid / length * i;
}
else {
newxy.x = org.x - wid / length * i;
}
if (org.y < now.y) {
newxy.y = org.y + hei / length * i;
}
else {
newxy.y = org.y - hei / length * i;
} i++;
}
comment();
}
function comment() {
ctx.beginPath();
ctx.arc(newxy.x, newxy.y, 3, 0, Math.PI * 2, true);
ctx.stroke(); }
function clean() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
setInterval(function () {
clean();
init();
}, 10);
window.onload("load", init(), true);
</script> </body>
</html>
Canvas中点到点的路径运动的更多相关文章
- canvas 实现光线沿不规则路径运动
canvas 实现光线沿不规则路径运动 此文章为原创,请勿转载 1.svg实现 2.canvas实现 3.坑点 svg让动画沿着不规则路径运动 查阅svg文档后发现,svg动画运动有两种实现方式,且都 ...
- WPF编程，通过Path类型制作沿路径运动的动画一种方法。
原文:WPF编程,通过Path类型制作沿路径运动的动画一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/de ...
- 简单聊一聊那些svg的沿路径运动
之前遇见动画就很想用css实现,显然有些效果是我们力所不能及,实现起来麻烦,效果不好,让人捉急.其实归结起来,不同的动画有自己的优势,根据实际情况进行取舍.本文就告诉大家如何用SVG写出个简单动画.就 ...
- u3d 逐个点运动，路径运动。 U3d one by one, path motion.
u3d 逐个点运动,路径运动. U3d one by one, path motion. 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com E-m ...
- WPF编程，通过Path类型制作沿路径运动的动画另一种方法。
原文:WPF编程,通过Path类型制作沿路径运动的动画另一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/d ...
- ThreeJS模拟人沿着路径运动-路径箭头使用纹理offset偏移
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Canvas绘图中的路径描边与填充
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
- [js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解
路径在canvas绘图中,经常被用到,是一个非常重要的概念. 比如:我们要在canvas画出3条直线,要求用不同的颜色加以区分. <style> body { background: #0 ...
- OpenLayer实现路径运动
近期由于业务的需求,让我这从未想过要碰Web Gis的业余前端开发者,走了Web Gis的开发道路.功能需求很简单,但却也是让自己难为了好几天.如,应该选择那个Gis框架,Gis框架的兼容性如何,直接 ...
随机推荐
- java 内存泄露 学习
1.什么事内存泄露 内存泄露就是对象不用了,但是无法回收该对象占用的内存. 2.java不是有垃圾回收机制,咋还会发生内存泄露呢? java的垃圾回收机制就是把无用的对象(GC roots可达与否)用 ...
- Circle - SGU 130（递推）
题目大意:一个圆上有2K个点,用K个线把他们连接起来,求出这些线最少可以把这个圆分成P部分,有N种分割方法.输出N和P. 分析:分割线一定是相互不相交的线,所以可以把这写分成两部分,f[i] += f ...
- The Doors - POJ 1556 (线段相交)
题目大意:有一个房间(左上角(0,10),右下角(10,0)),然后房间里有N面墙,每面墙上都有两个门,求出来从初始点(0,5),到达终点(10,5)的最短距离. 分析:很明显根据两点之间直线最短 ...
- android ROM备份和还原，再也不用当心刷到垃圾ROM，而还原不了原有系统
安卓刷机后如何还原以前ROM 和系统备份,本教程为大家介绍刷机后如何还原到以前的ROM 和系统备份. 很多人,看到了好多新的rom,包括测试版的新rom,心里痒痒的.想刷一刷.尝尝鲜,结果刷完,感觉新 ...
- 如何将下载好的jar包添加到maven本地仓库
1.首先在pom.xml中添加 <dependency> <groupId>org.springframework.security</groupId> ...
- iOS10-配置获取隐私数据权限声明
iOS10中,苹果加强了对用户隐私数据的保护,在访问以下数据的时候都需要在info.list重配置privacy,进行声明,否则程序无法正常运行. Contacts, Calendar, Remind ...
- SQL Server阻止了对组件xp_cmdshell过程的解决方案 分类： SQL Server 2015-03-05 08:31 305人阅读 评论(0) 收藏
SQL Server阻止了对组件xp_cmdshell过程的解决方案 错误描述:SQL Server阻止了对组件'xp_cmdshell'的过程'sys.xp_cmdshell'的访问.因为此组件已作 ...
- 用 Qt 中的 QDomDocument类 处理 XML 文件（上）
我们可以看到,如果所要读取的XML文件不是很大,采用DOM读取方法还是很便捷的,由于我用的也是DOM树读取的方法,所以,本文所介绍的也主要是基于DOM的方法读取. 根据常用的操作,我简单的把对XM ...
- WebLogic Server的Identity Assertion--转载
在一些典型的公司Web应用程序安全部署中,访问受保护应用程序的用户通过企业身份/访问管理产品,如Netegrity 的 SiteMinder,IBM 的WebSEAL 和Oblix 的 Oblix C ...
- JMX 与系统管理--转
前言 在 Java 程序的运行过程中,对 JVM 和系统的监测一直是 Java 开发人员在开发过程所需要的.一直以来,Java 开发人员必须通过一些底层的 JVM API,比如 JVMPI 和 JVM ...