当前位置:网站首页>Realize colorful lines and shape your heart
Realize colorful lines and shape your heart
2022-07-06 23:12:00 【Fertilizer science】
Table of contents title
demonstration
Source code display
Create a canvas
<canvas width="300" height="300" style="width:100%;height:100vh;" id="c"></canvas>
Basic style settings
overflow grammar : overflow:{1,2}
= visible | hidden | scroll | auto
The default value is :visible
Value :
visible: Don't cut content .hidden: Cut the content that exceeds the size of the object , The scroll bar will not appear .scroll: Cut the content that exceeds the size of the object , And display the excess content in the way of scroll bar .auto: Cut content and add scrollbars when needed , This is a body Objects and textarea The default value of .
padding:[ | ]{1,4}
The default value is : Look at each individual property
Related properties :[ padding-top ] || [ padding-right ] || [ padding-bottom ] || [
padding-left ]Value : : Use the length value to define the inner padding . Negative value not allowed : Use percentages to define internal padding . Negative value not allowed
explain : Retrieve or set the inner margin of the four sides of an object .
If all four parameter values are provided , Will press up 、 Right 、 Next 、 The order of the left acts on the four sides . If only one , Use for all four sides .
If you provide two , The first one is for 、 Next , The second one is for the left 、 Right . If three , The first one is for , The second one is for the left 、 Right , The third one is for .
Inline objects can use this property to set left 、 The inner patch on the right side ; To set the upper 、 The inner patch on both sides , You must first make the object appear at the block level or inline block level .
The corresponding script feature is padding.
html,body{
border: 0;
padding: 0;
margin: 0;
overflow: hidden;
background: #000;
}
.info{
z-index:999;
position : absolute;
left:0;
top:0;
padding:10px;
color:#fff;
background: rgba(0,0,0,0.5);
text-transform:capitalize;
}
use js To design animation effects
Defining variables
var canvas = document.getElementById('c');
var ctx = canvas.getContext("2d");
var height = void 0,width = void 0,innerpoints = [],outerpoints = [],particles = [];
var noofpoints = 200,trashold = 10;
var x = void 0,y = void 0,p = void 0,n = void 0,point = void 0,dx = void 0,dy = void 0,color = void 0;
deltaangle = Math.PI * 2 / noofpoints,
r = Math.min(height, width) * 0.5;
var distance = function distance(x1, y1, x2, y2) {
return Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
};
var mapVal = function mapVal(num, in_min, in_max, out_min, out_max) {
return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
};
Set up the canvas resize
var resize = function resize() {
height = ctx.canvas.clientHeight;
width = ctx.canvas.clientWidth;
if (ctx.canvas.clientWidth !== canvas.width ||
ctx.canvas.clientHeight !== canvas.height)
{
console.log("resized");
canvas.width = width;
canvas.height = height;
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(-Math.PI);
innerpoints = [];
r = 10;
for (var i = deltaangle; i <= Math.PI * 2; i += deltaangle) {
x = r * 16 * Math.pow(Math.sin(i), 3);
y = r * (13 * Math.cos(i) - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i));
innerpoints.push({
x: x,
y: y });
x = 10 * r * 16 * Math.pow(Math.sin(i), 3);
y = 10 * r * (13 * Math.cos(i) - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i));
outerpoints.push({
x: x,
y: y });
var step = random(0.001, 0.003, true);
particles.push({
step: step,
x: x,
y: y });
}
}
};
Design lines
var draw = function draw() {
ctx.fillStyle = "rgba(0,0,0,0.03)";
ctx.fillRect(-width, -height, width * 2, height * 2);
ctx.beginPath();
for (var i = 0; i < innerpoints.length; i++) {
s = outerpoints[i];
d = innerpoints[i];
point = particles[i];
if (distance(point.x, point.y, d.x, d.y) > 10) {
dx = d.x - s.x;
dy = d.y - s.y;
point.x += dx * point.step;
point.y += dy * point.step;
color = distance(0, 0, point.x, point.y);
ctx.beginPath();
ctx.fillStyle = "hsl(" + color % 360 + ",100%,50%)";
ctx.arc(point.x, point.y, 2, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
} else {
point.x = d.x;
point.y = d.y;
ctx.beginPath();
ctx.arc(point.x, point.y, 2, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
particles[i].x = s.x;
particles[i].y = s.y;
particles[i].step = random(0.001, 0.003, true);
}
}
};
Click to get the information directly
If you are learning python perhaps Java Even if it is C If you have any problems, you can leave me a message , Because in the early stage of learning, novices always take many detours , At this time, if there is no one to help, it is easy to give up . There are many such examples around. Many people change their majors and directions as they learn , Not only their own problems, but also the lack of correct learning . So as a passer-by, I hope to leave a message to me if you have any questions , It's not help, it's just a matter of typing a few lines easily .
Here you are python,Java Learning materials and interesting programming projects , More difficult to find resources . Anyway, it's not a loss to see .
边栏推荐
- (flutter2) as import old project error: inheritfromwidgetofexacttype
- [untitled]
- None of the strongest kings in the monitoring industry!
- Financial professionals must read book series 6: equity investment (based on the outline and framework of the CFA exam)
- DR-Net: dual-rotation network with feature map enhancement for medical image segmentation
- MATLAB小技巧(27)灰色预测
- MySQL数据库之JDBC编程
- 服务器的系统怎么选者
- 借助这个宝藏神器,我成为全栈了
- Why are some people still poor and living at the bottom of society even though they have been working hard?
猜你喜欢
动作捕捉用于蛇运动分析及蛇形机器人开发
DR-Net: dual-rotation network with feature map enhancement for medical image segmentation
Balanced Multimodal Learning via On-the-fly Gradient Modulation(CVPR2022 oral)
The problem that dockermysql cannot be accessed by the host machine is solved
Isomorphism + cross end, knowing applet +kbone+finclip is enough!
mysql拆分字符串作为查询条件的示例代码
Designed for decision tree, the National University of Singapore and Tsinghua University jointly proposed a fast and safe federal learning system
视图(view)
专为决策树打造,新加坡国立大学&清华大学联合提出快速安全的联邦学习新系统
Aardio - Method of batch processing attributes and callback functions when encapsulating Libraries
随机推荐
Dayu200 experience officer runs the intelligent drying system page based on arkui ETS on dayu200
案例推荐丨安擎携手伙伴,保障“智慧法院”更加高效
Aardio - Method of batch processing attributes and callback functions when encapsulating Libraries
NFTScan 开发者平台推出 Pro API 商业化服务
PDF批量拆分、合并、书签提取、书签写入小工具
专为决策树打造,新加坡国立大学&清华大学联合提出快速安全的联邦学习新系统
How does crmeb mall system help marketing?
CRMEB商城系统如何助力营销?
Enterprises do not want to replace the old system that has been used for ten years
Project duplicate template
OpenSSL: a full-featured toolkit for TLS and SSL protocols, and a general encryption library
[unity] upgraded version · Excel data analysis, automatically create corresponding C classes, automatically create scriptableobject generation classes, and automatically serialize asset files
UE4 blueprint learning chapter (IV) -- process control forloop and whileloop
Slide the uniapp to a certain height and fix an element to the top effect demo (organize)
Face recognition class attendance system based on paddlepaddle platform (easydl)
Cocoscreator+typescripts write an object pool by themselves
安全保护能力是什么意思?等保不同级别保护能力分别是怎样?
docker中mysql开启日志的实现步骤
【Unity】升级版·Excel数据解析,自动创建对应C#类,自动创建ScriptableObject生成类,自动序列化Asset文件
让 Rust 库更优美的几个建议!你学会了吗?