前端canvas——赛贝尔曲线

曲线之美,不在于曲线本身,而在于用的人。

所以就有了这期赛贝尔曲线。

新规矩,先上个GIT。

效果图


 

开局一张图,代码全靠编。

代码

画骨

先想着怎么画一个心形吧,等你想好了,就知道怎么画了。

首先就还是JS创建Canvas,因为这样有代码提示。

        const canvas = document.createElement('canvas')canvas.width = canvas.height = 600document.body.append(canvas)

接着就是调用三阶的赛贝尔曲线,什么是三阶?

除了命名上不同,还有参考点个数不同——二阶的就一个参考点,三阶有很多个。

众所周知,心形其实是一个不规则的曲线,所以一个是不行的,至少不那么好看。

咱们就用三阶:

            ctx.beginPath()ctx.moveTo(300, 200)ctx.bezierCurveTo(40, 20, 0, 460, 300, 500)ctx.moveTo(300, 200)ctx.bezierCurveTo(560, 20, 600, 460, 300, 500)ctx.closePath()ctx.stroke()

里面的参考点坐标,自己想怎么来就怎么来。

前提是能看出来这是一个心形就OK了,看不出来也没关系,咱们最重要的在于怎么写动画。

如果你按照我的代码写,最终运行的效果中间是有一根线的,你可以stroke()两次,但是我“老奸巨猾”,选择了让画笔颜色消失。

当然啦,你也可以用fill(),这个是最好的。

我的宗旨:

道路千万条

这样,边框的颜色就没有了——因为边框没有了。

上色(可选)

画完这个,就得上色了。

上色很简单,你可以创建一个最简单的线性渐变色,然后fillStyle直接赋值即可。

你也可以追求花里胡哨,选择径向渐变,甚至是放射性渐变。

我这里选择径向渐变,代码就不给了,“心”的颜色取决于你喜欢什么色。

模糊(可选)

如果你跟我一样,Very Strong(跟我念,sizhuang)。

那你还可以上个模糊,模糊很简单,就四个参数,直接一股脑全巴拉巴拉写完就OK了:

            ctx.shadowColor = '#ccc' // 模糊颜色ctx.shadowOffsetX = 12 // 模糊坐标ctx.shadowOffsetY = 18ctx.shadowBlur = 58 // 模糊度数

对了,忘记告诉你了,模糊要在fill()和stroke()之前进行,要不然你铁定显示不出模糊效果。

模糊度数越高,你越看不清楚阴影。

至于取值,看你喜欢什么样的模糊效果,有投影的效果,有完全模糊的效果,都看你喜欢。

封装函数

封装函数都会吧?

-为什么要封装?

-为了后续调用。

对了,记得写个具名函数。

为了好理解,函数名我起init()——这都是学人的,美其名曰:企业级标准。

跳动的心

下面就是最困难的了——怎么让这个静止的心跳动起来了。

其实也很简单,那就是先把旧的图案去掉,换上新的。

道理就是这么个理,但是实现起来就很抽筋:

我们知道,心跳动是什么?

是一个过程,有来有回的。

你不能光来不回吧?

所以咱们得划定个范围,让“心”这个图案在这个范围内不停播放。

问:需要几个变量?

答:两个。

一个是步进量,一个是方向:

                if (scaleFactor >= 1.08 || scaleFactor <= 0.98) {scaleDirection *= (-1) // 改变缩放方向}

GIF图中是有个循环播放的效果的。

怎么循环呢?总不能用while吧?

好像又不是不行,就是你控制不了时间啊。

而且while很容易控制不住,死循环就炸鸡了。

既然提到时间了,那就用setInterval——定时器咯。

跟我拼写:s-e-t-I-n-t-e-r-v-a-l,setInterval。

思想工作完成,开始写函数,函数名写啥?

        function bounce() {let scaleFactor = 1let scaleDirection = 1setInterval(() => {ctx.clearRect(-300, -300, 600, 600)scaleFactor += 0.01 * scaleDirectionif (scaleFactor >= 1.08 || scaleFactor <= 0.98) {scaleDirection *= (-1)}// 应用变换并重新绘制心形ctx.save() // 保存当前画布状态ctx.scale(scaleFactor, scaleFactor)init() // 重新绘制心形ctx.restore() // 恢复画布到保存的状态}, 50)}

这个时间啊,就看你们自己调整了。

太快,不好看;太慢,又好像die了。

所以,你自己把握一下啦。

写完函数之后,记得调用函数,这样,咱们的动画就做好啦。

总结

又到了收工的时候,不知道你发现没发现,这个心居然不是原地跳动的。

这个怎么办捏?

当然是要付费学习的啦。

Tips:定位用一下啦。

最后给出所有代码:

    <script>const canvas = document.createElement('canvas')canvas.width = canvas.height = 600document.body.append(canvas)const ctx = canvas.getContext('2d')function init(){// 彩damn:先在这里改一下定位,然后下面的所有坐标位置都要修改ctx.beginPath()ctx.moveTo(300, 200)ctx.bezierCurveTo(40, 20, 0, 460, 300, 500)ctx.moveTo(300, 200)ctx.bezierCurveTo(560, 20, 600, 460, 300, 500)ctx.closePath()ctx.fill()}function bounce() {let scaleFactor = 1let scaleDirection = 1setInterval(() => {ctx.clearRect(0, 0, 600, 600)scaleFactor += 0.01 * scaleDirectionif (scaleFactor >= 1.08 || scaleFactor <= 0.98) {scaleDirection *= (-1)}// 应用变换并重新绘制心形ctx.save() // 保存当前画布状态ctx.scale(scaleFactor, scaleFactor)// ctx.translate(0, 0) // 彩damn:这个再次改变坐标轴的原点,配合上面。init() // 重新绘制心形ctx.restore() // 恢复画布到保存的状态}, 50)}bounce()</script>

-问:居中效果不会喔。

-答:是不是margin: auto不起作用啊。

-问:是喔,你怎么知道gie?

-答:Canvas是什么元素?不是块元素嘛,这个时候你要改变它的形状啊,用display嘛。

-问:你的效果这么piao亮gie?

-答:用了径向渐变、加了模糊效果,canvas水平居中效果、图案居中缩放。

居中缩放,学一下了喂。 

再见啦。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/49486.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ES(Elasticsearch)常用的函数有哪些?

【电子书大全】内含上千本顶级编程书籍&#xff0c;是程序员必备的电子书资源包&#xff0c;并且会不断地更新&#xff0c;助你在编程的道路上更上一层楼&#xff01; 链接: https://pan.baidu.com/s/1yhPJ9LmS_z5TdgIgxs9NvQ?pwdyyds > 提取码: yyds Elasticsearch&#x…

Cyberchef基础概念之-循环语句操作-Jump/Label

在本专栏的前面的文章介绍了fork,merge,subsection,register等多种概念来解决实际场景的问题。本文将介绍的Jump/Label的操作类似于编程语言中的for和while的功能&#xff0c;相信在学会使用jump操作后&#xff0c;将有助于解决更为复杂的数据处理问题。 本文将详细的介绍该操…

Matplotlib : Python 的绘图库

Matplotlib 是一个 Python 的绘图库&#xff0c;广泛用于生成各种静态、动态、交互式的图表。它基于 NumPy&#xff0c;一个用于科学计算的 Python 库。Matplotlib 可以用于生成出版质量级别的图表&#xff0c;并且提供了丰富的定制选项&#xff0c;以适应不同用户的需求。以下…

linux对标画图板的软件

而不是对标photoshop sudo apt-get install kolourpaint

渗透测试 - 攻击思路与手段、工具分享

导语&#xff1a; 我在CSDN活跃已有6年&#xff0c;这是国内最优秀的IT学习平台之一。尽管有人对其持批评态度&#xff0c;我个人认为它拥有独特的优势。 最近我参加了一场网络安全工作的面试&#xff0c;在广州与面试官深入交流了半个多小时。尽管未能通过面试&#xff0c;但这…

每日OJ_力扣+牛客_另类加法_不用加号的加法

目录 力扣面试题 17.01. 不用加号的加法 解析代码 牛客另类加法 解析代码 力扣面试题 17.01. 不用加号的加法 面试题 17.01. 不用加号的加法 设计一个函数把两个数字相加。不得使用 或者其他算术运算符。 示例: 输入: a 1, b 1 输出: 2提示&#xff1a; a, b 均可能…

心跳机制详解

1、什么是心跳机制&#xff1f; 心跳机制出现在TCP长连接中&#xff0c;客户端和服务端之间定时发送一种特殊的数据包通知对方还在线&#xff0c;以确保TCP连接地可靠性&#xff0c;有可能TCP连接由于某些原因&#xff08;例如网线被拔了&#xff0c;突然断电&#xff09;导致…

iOS中的KVO(Key-Value Observing)详解

iOS中的KVO&#xff08;Key-Value Observing&#xff09;详解 一、KVO概述 KVO&#xff08;Key-Value Observing&#xff09;&#xff0c;即键值观察/监听&#xff0c;是苹果提供的一套事件通知机制。它允许一个对象&#xff08;观察者&#xff09;观察/监听另一个对象&#…

【网络安全】文件上传基础及过滤方式

文件上传漏洞是指由于程序员在对用户文件上传部分的控制不足或者处理缺陷&#xff0c;导致用户可以越过其本身权限向服务器上上传可执行的动态脚本文件。这些文件可以是木马、病毒、恶意脚本或者WebShell等。“文件上传”本身没有问题&#xff0c;有问题的是文件上传后&#xf…

OpenSSL学习笔记及在项目中的使用

OpenSSL官方命令手册&#xff1a;OpenSSL commands - OpenSSL Documentation 参考教程&#xff1a; 操作&#xff1a;OpenSSL的基本使用教程(一&#xff09;_openssl.exe使用教程-CSDN博客 操作&#xff1a;Linux和Shell回炉复习系列文章总目录 - 骏马金龙 - 博客园 (cnblog…

SAP主生产计划流程

流程概述 生产计划,在系统中体现为计划独立需求该数据元素,是SAP系统组织生产计划/运行MPS主生产计划(是平衡供需的支点)或MRP物料需求计划的源头数据,本流程描述了生产单位在ERP系统中生产计划管理流程。企业的主生产计划员通常以正式销售订单或备货订单为主要依据编制最…

【MR】现代机器人学-时间最优时间缩放

MR章节目录 第2章 配置空间 第3章 刚体运动 第4章 正向运动学 第5章 速度运动学与静力学 第6章 逆向运动学 第7章 闭链运动学 第8章 开链动力学 第9章 轨迹生成 9.1 定义 9.2 点到点轨迹 9.3 多项式通过点轨迹 9.4 时间最优时间缩放 第10章 运动规划 第11章 机器人控制 第12章 …

20 Python常用内置函数——eval()

内置函数 eval() 函数用来计算字符串的值&#xff0c;在有些场合也可以用来实现类型转换的功能。除此之外&#xff0c;eval() 也可以对字节串进行求值&#xff0c;还可以执行内置函数 compile() 编译生成的代码对象。 print(eval(b35)) print([eval(8), type(eval(8))]) # 把…

Keras入门:一维线性回归问题

目录 一、一维变量线性回归 1. 数据生成 2. 建立训练模型 3. 作图 4. 完整代码 一、一维变量线性回归 1. 数据生成 import keras import numpy as np import matplotlib.pyplot as plt #matplotlib inline xnp.linspace(0, 100, 30) #0~100之间&#xff0c;生成30个数 y…

.NET Core 中的字符串压缩方法

字符串压缩的概念 字符串压缩通常指的是通过算法减少字符串表示所需的数据量&#xff0c;同时保持字符串的原始信息或能够无损地恢复原始字符串。这种压缩可以是针对文本数据的特定算法&#xff0c;也可以是更通用的数据压缩算法。 .NET Core 中的字符串压缩方法 使用数据压…

linux 回到根目录

linux下如何回到根目录&#xff1f; cd / 以根目录开头 (切换到系统根目录) cd ~ 回到自己的home目录(切换到用户主目录) /home/用户名 cd .. 返回上级目录 cd - 回看功能 pwd 查看当前目录

构建现代数据湖

现代数据湖是一半数据仓库和一半数据湖&#xff0c;对所有事情都使用对象存储。使用对象存储来构建数据仓库是通过 Open Table Formats OTF&#xff09; 实现的&#xff0c;例如 Apache Iceberg、Apache Hudi 和 Delta Lake&#xff0c;这些规范一旦实现&#xff0c;就可以无缝…

PHP基础语法-Part1

脚本格式 PHP脚本以<?php开头&#xff0c;以?>结尾&#xff1b; PHP语句以分号结尾&#xff08;;&#xff09; PHP是解释型语言&#xff1b; 输入和输出 获取用户的输入&#xff1a; $input readline("input:"); echo $input; echo "input:";…

vllm部署记录

1. pip安装 pip install vllm 下载模型在huggingface.co 注意在modelscope上的这个opt-125m好像不行了,我git不下来报错 启动服务 vllm serve opt-125m --model opt-125m --port 8888 第一个opt-125m是名字,可以在vllm支持的模型中查到,第二个是模型存放文件夹及其路径…

Github 2024-07-26开源项目日报 Top10

根据Github Trendings的统计,今日(2024-07-26统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Java项目2TypeScript项目2C++项目2HTML项目1Python项目1C#项目1Lua项目1JavaScript项目1Vue项目1C项目1免费编程学习平台:freeCodeCamp.org 创…