猫史档案馆

首先准备一个文件夹，里面装3样东西。

第一个，文件名index.html，用记事本打开，输入以下内容：

<html><head></head><body>
    <canvas id="can" style="
    height: 733;
    background-color: black;
    width: 1537;
"></canvas>
    <script src="index.js"></script>
    
</body></html>

然后再准备一个文件，命名为index.js，用记事本打开，输入以下内容：

//lsqare开平方
function lsqare(a){
if (a >= 0) {
  return Math.pow(a, 1 / 3);
}
if (a < 0) {
  return -Math.pow(-a, 1 / 3);
}
}
//定义域【-500，500】
function f1(x){
  return 160*((lsqare(Math.pow(x/200, 2))-Math.pow(1-Math.pow(x/200, 2), 1 / 2)))
}
//定义域【-500，500】
function f2(x){
  return 160*((lsqare(Math.pow(x/200, 2))+Math.pow(1-Math.pow(x/200, 2), 1 / 2)))
}
//定义常量
var can=document.getElementById("can")
var ctx=can.getContext("2d")
var img=new Image()
img.src="love.png"
//函数定位
function plat(x,y,w){
  return [can.width/2+x-(w/2),can.height/2+y-(w/2)]
}
//相似三角形
function simi(x,y){
  var similong=Math.pow((Math.pow(x,2)+Math.pow(y,2)),1/2)
  return [x+3*x/similong,y+3*y/similong]
}
//随机数
function random(a, b) {
  if (a > b) {
    var c = a;
    a = b;
    b = c;
  }
  return Math.floor(Math.random() * (b - a + 1) + a);
}
//画图
var wid=[]
var pla=[]//下
var wid2=[]
var pla2=[]//上
var plaz=[]
var plaz2=[]
function draw(){
  var t=0
  for (var j_index in wid) {//大小增加
    var j = wid[j_index];
    wid[t]=j+0.25
    var t=t+1
  }
  var t=0
  for (var j_index in pla){//尺寸增加
    var j = pla[j_index];
    var d=simi(j,plaz[t])
    pla[t]=d[0]
    plaz[t]=d[1]
    var t=t+1
  }
  if (wid.length>=110){//去掉杂乱部分
    wid.splice(117);
    pla.splice(117)
    plaz.splice(117)
  }
  var t=0
  for (var j_index in wid2) {//大小增加2
    var j = wid2[j_index];
    wid2[t]=j+0.32
    var t=t+1
  }
  var t=0
  for (var j_index in pla2){//尺寸增加2
    var j = pla2[j_index];
    var d=simi(j,plaz2[t])
    pla2[t]=d[0]
    plaz2[t]=d[1]
    var t=t+1
  }
  if (wid2.length>=80){//去掉杂乱部分
    wid2.splice(77);
    pla2.splice(77)
    plaz2.splice(77)
  }
  for (var count = 0;count < 4;count++) {//下部新增
    m=random(-200,200)
    pla.unshift(m)
    wid.unshift(1)
    plaz.unshift(f1(m))
  }
  for (var count = 0;count < 4;count++) {//上部新增
    m=random(-200,200)
    pla2.unshift(m)
    wid2.unshift(1)
    plaz2.unshift(f2(m))
  }
  ctx.clearRect(0,0,can.width,can.height)//清空画板
  for (var count = 0;count < wid.length;count++) {//下部绘图
    list=plat(pla[count]/4,-plaz[count]/4,wid[count])
    ctx.drawImage(img,list[0],list[1],wid[count],wid[count])
  }
  for (var count = 0;count < wid2.length;count++) {//上部绘图
    list=plat(pla2[count]/4,-plaz2[count]/4,wid2[count])
    ctx.drawImage(img,list[0],list[1],wid2[count],wid2[count])
  }
}
img.onload=function(){
console.log("have finished");
setInterval(draw,40)
}

然后再右击下载保存这张图片：

center_image

然后把图片命名成love.png，再打开index.html就可以看到这番图像：

center_image

然后你就很爽了

猫史档案馆

html的爱心表白^.^

回复