Html简易绘制玫瑰，爱心，蛋糕_html 爱心轮廓中间玫瑰花-CSDN博客

本文链接：https://blog.csdn.net/lr_24353/article/details/140959943

绘制玫瑰

新建一个文本文档，添加内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Happy Birthday!</title>
		<h2 style="text-align: center">Happy Birthday Girl!</h2>
		<style type="text/css">
			#shusheng {
     
				position: absolute;
				width: 100%;
				height: 100%;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div style="text-align: center">
		</div>
		<div id="shusheng">
			<canvas id="c"></canvas>
			<script>
				var b = document.body;
				var c = document.getElementsByTagName('canvas')[0];
				var a = c.getContext('2d');
				document.body.clientWidth;
			</script>
			<script>
				with(m = Math) C = cos,
					S = sin,
					P = pow,
					R = random;
				c.width = c.height = f = 500;
				h = -250;

				function p(a, b, c) {
     
					if (c > 60)
						return [S(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) - S(b) * 50, b * f + 50, 625 + C(a * 7) * (13 + 5 / (.2 +
							P(b * 4, 4))) + b * 400, a * 1 - b / 2, a];
					A = a * 2 - 1;
					B = b * 2 - 1;
					if (A * A + B * B < 1) {
     
						if (c > 37) {
     
							n = (j = c & 1) ? 6 : 4;
							o = .5 / (a + .01) + C(b * 125) * 3 - a * 300;
							w = b * h;
							return [o * C(n) + w * S(n) + j * 610 - 390, o * S(n) - w * C(n) + 550 - j * 350, 1180 + C(B + A) * 99 -
								j * 300, .4 - a * .1 + P(1 - B * B, -h * 6) * .15 - a * b * .4 + C(a + b) / 5 + P(C((o * (a +
									1) + (B > 0 ? w : -w)) / 25), 30) * .1 * (1 - B * B), o / 1e3 + .7 - o * w * 3e-6
							]
						}
						if (c > 32) {
     
							c = c * 1.16 - .15;
							o = a * 45 - 20;
							w = b * b * h;
							z = o * S(c) + w * C(c) + 620;
							return [o * C(c) - w * S(c), 28 + C(B * .5) * 99 - b * b * b * 60 - z / 2 - h, z, (b * b * .3 + P((1 - (
								A * A)), 7) * .15 + .3) * b, b * .7]
						}
						o = A * (2 - b) * (80 - c * 2);
						w = 99 - C(A) * 120 - C(b) * (-h - c * 4.9) + C(P(1 - b, 7)) * 50 + c * 2;
						z = o * S(c) + w * C(c) + 700;
						return [o * C(c) - w * S(c), B * 99 - C(P(b, 7)) * 50 - c / 3 - z / 1.35 + 450, z, (1 - b / 1.2) * .9 + a *
							.1, P((1 - b), 20) / 4 + .05
						]
					}
				}
				setInterval(
					'for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}',
					0)
			</script>
		</div>
	</body>
</html>

保存内容，重命名把后缀txt改成html
效果

绘制爱心

新建一个文本文档，添加内容

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Canvas爱心表白动画特效</title>

<style>
html, body {
     
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000;
}
canvas {
     
  width: 100%;
  height: 100%;
}
</style>

</head>
<body>

<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

<canvas id="pinkboard"></canvas>

<script>
/*
 * Settings
 */
var settings = {
     
  particles: {
     
    length:   500, // maximum amount of particles
    duration:   2, // particle duration in sec
    velocity: 100, // particle velocity in pixels/sec
    effect: -0.75, // play with this for a nice effect
    size:      30, // particle size in pixels
  },
};

/*
 * RequestAnimationFrame polyfill by Erik M?ller
 */
(function(){
     var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){
     window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame){
     window.requestAnimationFrame=function(h,e){
     var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){
     h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){
     window.cancelAnimationFrame=function(d){
     clearTimeout(d)}}}());

/*
 * Point class
 */
var Point = (function() {
     
  function Point(x, y) {
     
    this.x = (typeof x !== 'undefined') ? x : 0;
    this.y = (typeof y !== 'undefined') ? y : 0;
  }
  Point.prototype.clone = function() {
     
    return new Point(this.x, this.y);
  };
  Point.prototype.length = function(length) {
     
    if (typeof length == 'undefined')
      return Math.sqrt(this.x * this.x + this.y * this.y);
    this.normalize();
    this.x *= length;
    this.y *= length;
    return this;
  };
  Point.prototype.normalize = function() {
     
    var length = this.length();
    this.x /= length;
    this.y /= length;
    return this;
  };
  return Point;
})();

/*
 * Particle class
 */
var Particle = (function() {
     
  function Particle() {
     
    this.position = new Point();
    this.velocity = new Point();
    this.acceleration = new Point();
    this.age = 0;
  }
  Particle.prototype.initialize = function(x, y, dx, dy) {
     
    this.position.x = x;
    this.position.y = y;
    this.velocity.x = dx;
    this.velocity.y = dy;
    this.acceleration.x = dx * settings.particles.effect;
    this.acceleration.y = dy * settings.particles.effect;
    this.age = 0;
  };
  Particle.prototype.update = function(deltaTime) {
     
    this.position.x += this.velocity.x * deltaTime;
    this.position.y += this.velocity.y * deltaTime;