Canvas5——路劲应用绘制动画效果初级

2024-03-14 16:38

本文主要是介绍Canvas5——路劲应用绘制动画效果初级,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Information

利用Canvas路径api绘制线与圆,让圆沿着线的方向运动。实现原理很简单,就是不断的清楚画布,然后再重新绘制各个组件。当然,这个逻辑也是制作大部分动画的根本逻辑。
有一些复杂的动画会用到store()函数,对画布上的元素进行存储,不完全清除掉,以后就会接触到了。
这个代码的效果可以看这里:

演示效果

代码如下:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.start/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
canvas{
background-color: powderblue;
}
</style>
</head>
<body>
<!--创建300x300的画布-->
<canvas id="canvas" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var start = {x: 0, y:150};
var end = {x: 300, y: 150};
var nowxy = {x: 0, y: 0};
function init() {
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.lineTo(end.x, end.y);
ctx.stroke();
math();
}
var i = 1;
function math() {
var wid = Math.abs(end.x - start.x);//x轴的长,绝对值
var hei = Math.abs(end.y - start.y);//y轴长
var length = Math.pow(Math.pow(wid, 2) + Math.pow(hei, 2), 1 / 2);//(长平方+宽平方)开根 ,其实就是直角三角关系
if (i < length) {//通过SetInterval,按照Length方向每次运行1px
if (start.x < end.x) {
nowxy.x = start.x +wid / length * i;
}
else {
nowxy.x = start.x - wid / length * i;
}
if (start.y < end.y) {
nowxy.y = start.y + hei / length * i;
}
else {
nowxy.y = start.y - hei / length * i;
}
i++;
}
drawcircle();
}
function drawcircle() {
ctx.beginPath();
ctx.arc(nowxy.x, nowxy.y, 3, 0, Math.PI * 2, true);
ctx.stroke();
}
function clean() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
setInterval(function () {
clean();
init();
}, 10);
</script>
</body>
</html>

这只是简单的线条动画,下一步可以将元素换位图片等等,实现更好看的动画效果。

这篇关于Canvas5——路劲应用绘制动画效果初级的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/809026

相关文章

Python使用Tkinter打造一个完整的桌面应用

《Python使用Tkinter打造一个完整的桌面应用》在Python生态中,Tkinter就像一把瑞士军刀,它没有花哨的特效,却能快速搭建出实用的图形界面,作为Python自带的标准库,无需安装即可... 目录一、界面搭建:像搭积木一样组合控件二、菜单系统:给应用装上“控制中枢”三、事件驱动:让界面“活”

如何确定哪些软件是Mac系统自带的? Mac系统内置应用查看技巧

《如何确定哪些软件是Mac系统自带的?Mac系统内置应用查看技巧》如何确定哪些软件是Mac系统自带的?mac系统中有很多自带的应用,想要看看哪些是系统自带,该怎么查看呢?下面我们就来看看Mac系统内... 在MAC电脑上,可以使用以下方法来确定哪些软件是系统自带的:1.应用程序文件夹打开应用程序文件夹

Python Flask 库及应用场景

《PythonFlask库及应用场景》Flask是Python生态中​轻量级且高度灵活的Web开发框架,基于WerkzeugWSGI工具库和Jinja2模板引擎构建,下面给大家介绍PythonFl... 目录一、Flask 库简介二、核心组件与架构三、常用函数与核心操作 ​1. 基础应用搭建​2. 路由与参

Spring Boot中的YML配置列表及应用小结

《SpringBoot中的YML配置列表及应用小结》在SpringBoot中使用YAML进行列表的配置不仅简洁明了,还能提高代码的可读性和可维护性,:本文主要介绍SpringBoot中的YML配... 目录YAML列表的基础语法在Spring Boot中的应用从YAML读取列表列表中的复杂对象其他注意事项总

Kotlin Compose Button 实现长按监听并实现动画效果(完整代码)

《KotlinComposeButton实现长按监听并实现动画效果(完整代码)》想要实现长按按钮开始录音,松开发送的功能,因此为了实现这些功能就需要自己写一个Button来解决问题,下面小编给大... 目录Button 实现原理1. Surface 的作用(关键)2. InteractionSource3.

电脑系统Hosts文件原理和应用分享

《电脑系统Hosts文件原理和应用分享》Hosts是一个没有扩展名的系统文件,当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从Hosts文件中寻找对应的IP地址,一旦找到,系统会立即打开对应... Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》:本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细,详细内容请阅读本文,希望能对你有所帮助... 一、外部 css(推荐方式)定义:将 CSS 代码保存为独立的 .css 文件,通过 <link> 标签

Python使用Reflex构建现代Web应用的完全指南

《Python使用Reflex构建现代Web应用的完全指南》这篇文章为大家深入介绍了Reflex框架的设计理念,技术特性,项目结构,核心API,实际开发流程以及与其他框架的对比和部署建议,感兴趣的小伙... 目录什么是 ReFlex?为什么选择 Reflex?安装与环境配置构建你的第一个应用核心概念解析组件

使用WPF实现窗口抖动动画效果

《使用WPF实现窗口抖动动画效果》在用户界面设计中,适当的动画反馈可以提升用户体验,尤其是在错误提示、操作失败等场景下,窗口抖动作为一种常见且直观的视觉反馈方式,常用于提醒用户注意当前状态,本文将详细... 目录前言实现思路概述核心代码实现1、 获取目标窗口2、初始化基础位置值3、创建抖动动画4、动画完成后

uniapp小程序中实现无缝衔接滚动效果代码示例

《uniapp小程序中实现无缝衔接滚动效果代码示例》:本文主要介绍uniapp小程序中实现无缝衔接滚动效果的相关资料,该方法可以实现滚动内容中字的不同的颜色更改,并且可以根据需要进行艺术化更改和自... 组件滚动通知只能实现简单的滚动效果,不能实现滚动内容中的字进行不同颜色的更改,下面实现一个无缝衔接的滚动