python画运动物体的轨迹_canvas动画—圆形扩散、运动轨迹
介绍
在ECharts中看到过这种圆形扩散效果,类似css3,刚好项目中想把它用上,but我又不想引入整个echart.js文件,更重要的是想弄明白它的原理,所以自己动手。在这篇文章中我们就来分析实现这种效果的两种方法,先上效果图:
实现原理
通过不断的改变圆的半径大小,不断重叠达到运动的效果,在运动的过程中,设置当前canvas的透明度context.globalAlpha=0.95,使得canvas上的圆逐渐透明直至为0,从而实现这种扩散、渐变的效果。
实现方法一
1. 关键技术点
context.globalAlpha = 0.95; //设置主canvas的绘制透明度。
创建临时canvas来缓存主canas的历史图像,再叠加到主canvas上。
2. 绘制过程
首先,我们先来写一个绘制圆的方法:
//画圆
var drawCircle = function() {
context.beginPath();
context.arc(150, 100, radius, 0, Math.PI * 2);
context.closePath();
context.lineWidth = 2; //线条宽度
context.strokeStyle = 'rgba(250,250,50,1)'; //颜色
context.stroke();
radius += 0.5; //每一帧半径增加0.5
//半径radius大于30时,重置为0
if (radius > 30) {
radius = 0;
}
};
然后,我们创建一个临时canvas用来缓存主canvas上的历史图像,设置主canvas的透明度context.globalAlpha=0.95(关键一步),在每次调用drawCircle方法绘制一个新圆之前都把主canvas上的图像,也就是之前的图像给绘制到临时的canvas中,等到drawCircle方法绘制完新圆后,再把临时canvas的图像绘制回主canvas中。
核心代码如下:
//创建一个临时canvas来缓存主canvas的历史图像
var backCanvas = document.createElement('canvas'),
backCtx = backCanvas.getContext('2d');
backCanvas.width = width;
backCanvas.height = height;
//设置主canvas的绘制透明度
context.globalAlpha = 0.95;
//显示即将绘制的图像,忽略临时canvas中已存在的图像
backCtx.globalCompositeOperation = 'copy';
var render = function() {
//1.先将主canvas的图像缓存到临时canvas中
backCtx.drawImage(canvas, 0, 0, width, height);
//2.清除主canvas上的图像
context.clearRect(0, 0, width, height);
//3.在主canvas上画新圆
drawCircle();
//4.等新圆画完后,再把临时canvas的图像绘制回主canvas中
context.drawImage(backCanvas, 0, 0, width, height);
};
实现方法二
与上一种方法相比,这种方法更加简单,同样是用到了透明度逐渐减小直到为0的原理,不同的是这里并没有创建临时canvas,而是运用了context.globalCompositeOperation属性值source-over和destination-in来配合使用,查看globalCompositeOperation属性介绍
核心代码如下:
var render = function() {
//默认值为source-over
var prev = context.globalCompositeOperation;
//只显示canvas上原图像的重叠部分
context.globalCompositeOperation = 'destination-in';
//设置主canvas的绘制透明度
context.globalAlpha = 0.95;
//这一步目的是将canvas上的图像变的透明
context.fillRect(0, 0, width, height);
//在原图像上重叠新图像
context.globalCompositeOperation = prev;
//在主canvas上画新圆
drawCircle();
};
地图上的应用
这里我采用的是第二种方式,将扩散、渐变效果运用到了百度地图上,感觉还比较炫,查看更多demo
总结
方法一、二都能实现同样的效果,如果动画绘制、操作canvas比较频繁,建议采用第一种方式,用临时canvas来缓存历史图像,效率更高。
python画运动物体的轨迹_canvas动画—圆形扩散、运动轨迹相关推荐
- python画运动物体的轨迹_使用python进行运动轨迹合并:多次骑行跑步轨迹叠加显示...
现有各种各样的运动app.运动手表手环以及gps码表等可以用于记录日常骑行或跑步等运动轨迹;但轨迹显示多数只限于显示一天的轨迹,经过搜索只发现一篇文章介绍跑步轨迹叠加方法(查看),根据教程尝试了下还因 ...
- 【计算机动画】实验 路径曲线与运动物体控制/FFD/关键帧动画
https://github.com/Birdy-C/homework_computeranimation 下面是第一个实验的报告.当时大概是闲的无聊会把它复制出来吧-- 转载于:https://ww ...
- 用python画旋转正方形_Python 正方形螺旋绘制 + 圆形螺旋
1.正方形螺旋 用遍历循环绘制,效果如下: 1 #正方形螺旋.py 2 3 from turtle import * 4 setup(800,800,200,200)5 len=5 6 penup() ...
- Python 求解自行车前后轮轨迹问题
♚ 作者:crazyhat,Python及科学计算爱好者. 数月前偶遇一道自行车相关的趣味数学题:根据下图[1]所示自行车前.后轮轨迹,判断自行车的前进方向,是从左往右还是从右往左? 自行车趣题 不曾 ...
- 传统运动物体检测方法的Python实现
传统运动物体检测方法的Python实现 文章目录 传统运动物体检测方法的Python实现 一.目标跟踪算法综述 1. 传统方法:特征提取+滤波类搜索算法 2. 深度学习方法: 目标检测和相似度匹配 二 ...
- python画轨迹曲线-python 画3维轨迹图并进行比较的实例
一. 数据的格式 首先我们需要x,y,z三个数据进行画图.从本实验用到的数据集KITTI 00.txt中举例: 1.000000e+00 9.043680e-12 2.326809e-11 5.551 ...
- 用python画动态三维轨迹_python 画3维轨迹图并进行比较的实例
一. 数据的格式 首先我们需要x,y,z三个数据进行画图.从本实验用到的数据集KITTI 00.txt中举例: 1.000000e+00 9.043680e-12 2.326809e-11 5.551 ...
- python+OpenCV笔记(三十七):检测运动物体——使用MOG/KNN背景差分器
目录 一.基本背景差分器 二.MOG背景差分器 流程 代码编写 三.KNN背景差分器 目前,许多运动检测技术都是基于简单的背景差分概念的,即假设摄像头(视频)的曝光和场景中的光照条件是稳定的,当摄像头 ...
- python画球轨迹图_python绘制铅球的运行轨迹代码分享
我们按照面向过程程序设计的思想,使用python编写了程序,追踪铅球在运行过程中的位置信息.下面,修改程序代码,导入turtle模块,将铅球的运行轨迹绘制出来. python3代码如下: from m ...
- python运动物体检测_运动检测ViBe算法python实现代码
运动物体检测一般分为背景建模和运动物体分析两步.即构建不包含运动物体的背景模型.然后将新的视频帧和背景模型对比,找出其中的运动物体.目前比较好的背景建模算法有两种:1)文章(Zivkovic Z. ( ...
最新文章
- Ubuntu 系统如何修改主机名
- 高速串行总线设计基础(三)SERDES的通用结构介绍
- hdu6376 度度熊剪纸条 思维
- 树的前序遍历、中序遍历、后序遍历详解
- java继承eclipse_Java-Maven(七):Eclipse中Maven依赖、聚合、继承特性
- 谷歌:修复0day漏洞的平均耗时比3年前减少28天
- js 内置对象之数组Array
- 公开封尘已久的即时通讯源码(转)
- 干货分享 | 工业信息数据库安全现状与技术分析
- SQLServer示例数据库AdventureWorks下载地址
- 云计算10个入门基础知识
- 10x 程序员工作法 - 划重点 | “自动化”主题的重点内容回顾汇总
- openlayers实现地图显示功能
- 计算机连接网络被限制,电脑连接wifi出现网络受限的解决方法
- c语言数学函数库根号程序,C语言初学 数学中带根号的复杂计算问题
- java初级笔记(翁恺男神
- htc one m7刷Linux,HTC One M7 刷机图文教程 一键刷Recovery教程
- 计算机四级网络工程师 郑州报考条件,郑州市网络工程师证在哪报名、考试费用...
- 九校联考-长沙市一中NOIP模拟Day1T1 矩阵游戏(game)
- 国外优秀JavaScript资源推荐
热门文章
- “三只猫,三分钟,捉三只老鼠,多少只猫,一百分钟,捉一百只老鼠”有感
- 数据分析学习总结笔记01:情感分析
- python爬取微博设备显示怎么更改_Python定向爬虫模拟新浪微博登录
- 开源数据分析平台Countly
- 在element框架中使用videojs-markers插件时,无法正常引入的坑
- android读sdcard大文件系统,Android中使用SDcard读取文件
- iOS查看每日限免APP+监控APP降价信息教程
- java pem 读取_PEM_密钥对生成与读取方法
- 手机安装pem_手机安装Charles证书
- sklearn NearestNeighbors