admin 管理员组文章数量: 1086866
[七夕节]——一款基于canvas绘制五颜六色线条合成一个爱心发光动画特效
Canvas基本介绍
Canvas介绍
1.canvas是html5的一个新标签，属于h5的新特性
2.canvas标签是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，三角形，折线等等,也可以用来画logo
3.它是通过javascript来画的，即脚本绘制图形
canvas可以用来干啥呢？
1.制作web网页游戏（但是如果代码写的不咋的游戏可能会非常卡）
2.数据可视化（这么说你可能不明白，但我告诉你echarts就是基于canvas）
3.广告banner的动态效果非常适合用canvas制作
4.canvas还可以用来内嵌一些网页
基本用法
<canvas>标签只有两个属性 – width 和 height,所以在低版本的浏览器是不支持的,要在浏览器中写上 :
<canvas id="tutorial" width="150" height="150">浏览器版本不支持</canvas>
<canvas>在没有设置宽高的时候,默认初始化为 :
<canvas width='300px' height='150px'></canvas>
浏览器支持
- Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 及其属性和方法。
**注释：**Internet Explorer 8 以及更早的版本不支持元素。
临摹canvas小案例
实现代码：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5线条照射爱心动画特效</title><link rel="stylesheet" href="css/zzsc.css"></head>
<body><canvas width="300" height="300" style="width:100%;height:100vh;" id="c"></canvas><script src="js/zzsc.js"></script></body>
</html>// zzsc.js
/* DaTouWang URL: www.datouwang.com */
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;
};
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,});}}
};
var random = function random(min, max, isFloat) {if (isFloat) {return Math.random() * (max - min) + min;}return ~~(Math.random() * (max - min) + min);
};resize();//particles = [...outerpoints];
ctx.globalAlpha = 0.5;
ctx.globalCompositeOperation = "source-over";
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);}}
};var render = function render() {resize();draw();requestAnimationFrame(render);
};requestAnimationFrame(render);
/* zzsc.css */
/* DaTouWang URL: www.datouwang.com */
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;
}
本文标签： 七夕节一款基于canvas绘制五颜六色线条合成一个爱心发光动画特效
版权声明：本文标题：[七夕节]——一款基于canvas绘制五颜六色线条合成一个爱心发光动画特效 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687847871a148775.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论