html5新特性之canvas动画_window.addeventlistener('resize', function () { ca-CSDN博客

本文链接：https://blog.csdn.net/qq_34886247/article/details/80701775

本文深入探讨HTML5的Canvas元素，讲解如何利用它创建动态和交互式的动画效果，包括基本绘图操作、时间帧动画原理以及实战示例，帮助开发者掌握Canvas在现代网页设计中的应用。

摘要由CSDN通过智能技术生成

直接贴代码

HTML：
<canvas id="canvas" width="1349" height="404"> </canvas>

CSS:
html{height:100%;background-image:-webkit-radial-gradient(ellipse farthest-corner at center top,#000d4d 0,#000105 100%);background-image:radial-gradient(ellipse farthest-corner at center top,#000d4d 0,#000105 100%);cursor:url('http://testtp5.xyz/wp-content/uploads/2018/05/bitbug_favicon.ico'),auto}
body{width:100%;height:100%;margin:0;overflow:hidden}
canvas{top:0;left:0;width:100%;height:100%;z-index:1;position:absolute}

JS:
$(document).ready(function()
{
	// 画布
	var o = document.getElementsByTagName("body")[0];
	var num = 200;
	var w = window.innerWidth;
	var h = o.offsetHeight;
	var max = 100;
	var _x = 0;
	var _y = 0;
	var _z = 150;
	var dtr = function(d) {
	  return d * Math.PI / 180;
	};

	var rnd = function() {
	  return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
	};
	var dist = function(p1, p2, p3) {
	  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
	};

	var cam = {
	  obj: {
		x: _x,
		y: _y,
		z: _z
	  },
	  dest: {
		x: 0,
		y: 0,
		z: 1
	  },
	  dist: {
		x: 0,
		y: 0,
		z: 200
	  },
	  ang: {
		cplane: 0,
		splane: 0,
		ctheta: 0,
		stheta: 0
	  },
	  zoom: 1,
	  disp: {
		x: w / 2,
		y: h / 2,
		z: 0
	  },
	  upd: function() {
		cam.dist.x = cam.dest.x - cam.obj.x;
		cam.dist.y = cam.dest.y - cam.obj.y;
		cam.dist.z = cam.dest.z - cam.obj.z;
		cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
		cam.ang.splane = cam.dist.x / Math