当前位置:网站首页>【Valentine's Day special effects】--Canvas realizes full screen love
【Valentine's Day special effects】--Canvas realizes full screen love
2022-08-04 23:50:00 【love / abuse / time】
Canvas简介:
Canvas是HTML5的一个新特性,canvas又叫做画板.我们可以在canvas上绘制我们需要的图形.anvas本身是一个HTML元素,需要HTML元素的配合高度和宽度属性而定义出的一块可绘制区域,定义区域之后使用JavaScript的脚本绘制图像的HTML元素.
- canvas 是一个矩形区域的
画布
,可以用 JavaScript 在上面绘画.控制其每一个像素. - canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能.
- canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法.
- HTML5 之前的 web 页面只能用一些固定样式的标签:比如 p、div、h1 等
- canvas是原生js对象,不建议使用jq
作用:It can basically draw graphics,Further production photos,绘制动画,Going a step further can process and render video.
canvas有两个属性,一个是宽度(width),one is height(height).Width and height can use inline properties,如下所示:
<canvas width="300px" height="150px" id="canvas">
This is Canvas
<img src="./backup.jpg" alt="">
</canvas>
注意:Older browsers may not support it,且结尾的</canvas>Labels cannot be omitted.
Canvas with no width and height set by defaultwidth=300px;height=150px;
Canvas小案例:
Full screen love scrolling effect appears:
实现代码如下;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>七夕520爱心表白</title>
<style>
*{margin:0; padding:0;}
body{ background-color: #1E1E1E; }
</style>
</head>
<body>
<canvas id="drawHeart"></canvas>
<script>
var hearts = [];
var canvas = document.getElementById('drawHeart');
var wW = window.innerWidth;
var wH = window.innerHeight;
// 创建画布
var ctx = canvas.getContext('2d');
// 创建图片对象
var heartImage = new Image();
heartImage.src = 'img/heart.svg';
var num = 100;
init();
window.addEventListener('resize', function(){
wW = window.innerWidth;
wH = window.innerHeight;
});
// 初始化画布大小
function init(){
canvas.width = wW;
canvas.height = wH;
for(var i = 0; i < num; i++){
hearts.push(new Heart(i%5));
}
requestAnimationFrame(render);
}
function getColor(){
var val = Math.random() * 10;
if(val > 0 && val <= 1){
return '#00f';
} else if(val > 1 && val <= 2){
return '#f00';
} else if(val > 2 && val <= 3){
return '#0f0';
} else if(val > 3 && val <= 4){
return '#368';
} else if(val > 4 && val <= 5){
return '#666';
} else if(val > 5 && val <= 6){
return '#333';
} else if(val > 6 && val <= 7){
return '#f50';
} else if(val > 7 && val <= 8){
return '#e96d5b';
} else if(val > 8 && val <= 9){
return '#5be9e9';
} else {
return '#d41d50';
}
}
function getText(){
var val = Math.random() * 10;
if(val > 1 && val <= 3){
return 'always';
} else if(val > 3 && val <= 5){
return 'zzy';
} else if(val > 5 && val <= 8){
return 'taylor swift';
} else{
return 'I Love You';
}
}
function Heart(type){
this.type = type;
// 初始化生成范围
this.x = Math.random() * wW;
this.y = Math.random() * wH;
this.opacity = Math.random() * .5 + .5;
// 偏移量
this.vel = {
x: (Math.random() - .5) * 5,
y: (Math.random() - .5) * 5
}
this.initialW = wW * .5;
this.initialH = wH * .5;
// 缩放比例
this.targetScale = Math.random() * .15 + .02; // 最小0.02
this.scale = Math.random() * this.targetScale;
// 文字位置
this.fx = Math.random() * wW;
this.fy = Math.random() * wH;
this.fs = Math.random() * 10;
this.text = getText();
this.fvel = {
x: (Math.random() - .5) * 5,
y: (Math.random() - .5) * 5,
f: (Math.random() - .5) * 2
}
}
Heart.prototype.draw = function(){
ctx.save();
ctx.globalAlpha = this.opacity;
ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);
ctx.scale(this.scale + 1, this.scale + 1);
if(!this.type){
// 设置文字属性
ctx.fillStyle = getColor();
ctx.font = 'italic ' + this.fs + 'px sans-serif';
// 填充字符串
ctx.fillText(this.text, this.fx, this.fy);
}
ctx.restore();
}
Heart.prototype.update = function(){
this.x += this.vel.x;
this.y += this.vel.y;
if(this.x - this.width > wW || this.x + this.width < 0){
// 重新初始化位置
this.scale = 0;
this.x = Math.random() * wW;
this.y = Math.random() * wH;
}
if(this.y - this.height > wH || this.y + this.height < 0){
// 重新初始化位置
this.scale = 0;
this.x = Math.random() * wW;
this.y = Math.random() * wH;
}
// 放大
this.scale += (this.targetScale - this.scale) * .1;
this.height = this.scale * this.initialH;
this.width = this.height * 1.4;
// -----文字-----
this.fx += this.fvel.x;
this.fy += this.fvel.y;
this.fs += this.fvel.f;
if(this.fs > 50){
this.fs = 2;
}
if(this.fx - this.fs > wW || this.fx + this.fs < 0){
// 重新初始化位置
this.fx = Math.random() * wW;
this.fy = Math.random() * wH;
}
if(this.fy - this.fs > wH || this.fy + this.fs < 0){
// 重新初始化位置
this.fx = Math.random() * wW;
this.fy = Math.random() * wH;
}
}
function render(){
ctx.clearRect(0, 0, wW, wH);
for(var i = 0; i < hearts.length; i++){
hearts[i].draw();
hearts[i].update();
}
requestAnimationFrame(render);
}
</script>
</body>
</html>
Name the following code heart.svg 与上面的htmlStored in the same level file directory to open and run.
<svg xmlns="http://www.w3.org/2000/svg" width="473.8px" height="408.6px" viewBox="0 0 473.8 408.6"><path fill="#d32932" d="M404.6,16.6C385.4,6.1,363.5,0,340,0c-41.5,0-78.5,18.9-103,48.5C212.3,18.9,175.3,0,133.8,0 c-23.3,0-45.3,6.1-64.5,16.6C27.9,39.5,0,83.4,0,133.9c0,14.4,2.4,28.3,6.6,41.2C29.6,278.4,237,408.6,237,408.6 s207.2-130.2,230.2-233.5c4.3-12.9,6.6-26.8,6.6-41.2C473.8,83.4,445.9,39.6,404.6,16.6z"/></svg>
边栏推荐
猜你喜欢
零基础如何入门软件测试?再到测开(小编心得)
Ab3d.PowerToys and Ab3d.DXEngine Crack
大师教你3D实时角色制作流程,游戏建模流程分享
[Cultivation of internal skills of string functions] strcpy + strcat + strcmp (1)
3年,从3K涨薪到20k?真是麻雀啄了牛屁股 — 雀食牛逼呀
学会反射后,我被录取了(干货)
【七夕情人节特效】-- canvas实现满屏爱心
资深游戏建模师告知新手,游戏场景建模师必备软件有哪些?
Nuclei(二)进阶——深入理解workflows、Matchers和Extractors
MySQL基础篇【聚合函数】
随机推荐
LeetCode Hot 100
再肝3天,整理了90个 NumPy 例子,不能不收藏!
App测试和Web测试的区别
Modelers experience sharing: model study method
[QNX Hypervisor 2.2用户手册]10.5 vdev ioapic
【无标题】
NebulaGraph v3.2.0 Release Note, many optimizations such as the performance of querying the shortest path
uniapp horizontal tab (horizontal scrolling navigation bar) effect demo (organization)
Mathematical Principles of Matrix
中日颜色风格
The role of @Async annotation and how to implement asynchronous listening mechanism
美团二面:Redis与MySQL双写一致性如何保证?
PZK学C语言之字符串函数(一)
[Happy Qixi Festival] How does Nacos realize the service registration function?
2022年华数杯数学建模
三大技巧让你成功入门3D建模,零基础小白必看
MySQL增删改查基础
对“为什么一些程序员很傲慢”的解读
MySQL基础篇【聚合函数】
SQL关联表更新