[SoOnPerson] 画布心形线

看一下百度搜索出来的心形线

[SoOnPerson] 画布心形线

我使用的是这个公式。

jsp文件

<%--
  User: SoOnPerson
  Date: 2018/4/2
  Time: 17:37
  Description:
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Loving Heart</title>
    <%--引入样式--%>
    <link rel="stylesheet" href="../../css/LovingHeart.css">
    <%--引入js--%>
    <script src="../../js/jquery.js"></script>
    <script src="../../js/LovingHeart.js"></script>
</head>
<body onload="draw();">
    <canvas id="background_block_web">

    </canvas>
</body>
</html>

看一下js文件

//屏幕的高度
var sc_height = screen.availHeight;
//屏幕的宽度
var sc_width = screen.availWidth;

function draw() {
    //jq获取元素
    var cav = $("#background_block_web");
    //设置style里的宽高
    cav.css({"height": sc_height, "width": sc_width, "margin": 0});
    //设置属性宽高，这个不设置的话，图案会很模糊
    cav.attr("width",sc_width);
    cav.attr("height",sc_height);
//原生获取元素，通过jq获取的好像不可以
    var cv = document.getElementById("background_block_web");
    //获取上下文对象2d,具体我也不太懂
    var context = cv.getContext('2d');
    //pongpongpong(context);
    dicarHeart(context);
}

//心型线
function dicarHeart(context) {
    context.beginPath();

    var i = 0;
    var a =-150;
    var y = a * (2 * Math.cos(i) - Math.cos(2 * i));
    var x = a * (2 * Math.sin(i) - Math.sin(2 * i));
    context.moveTo(x+sc_width/2, y-150+sc_height/2);
    while (i<10000){
        y = a * (2 * Math.cos(i) - Math.cos(2 * i));
        x = a * (2 * Math.sin(i) - Math.sin(2 * i));
        context.lineTo(x+sc_width/2, y-150+sc_height/2);
        i+=0.006;
    }
    context.fillStyle = "black";
    context.strokeStyle = "red";
    context.stroke();
    //SoOnPerson
}

我的这个方法不太好，应该有更好的方法。解释一下：

i也不是越大越好，也不是越小越好，自己试试就知道了。

a 是心的大小，绝对值的大小，正负只是方向

公式被我改了！x,y对换了位置，因为百度出来的是横过来的心，不太好看。

0.006这个值应该还是挺好的，如果太大，就会很粗的心，太小会不太好看。自己试试。

缺点：主要是写的时候好像有一个函数没看到，是可以修改坐标轴的原点位置的，没有用，有兴趣的可以看一下。我的是自己手动改的坐标。

看一下结果

百度搜的图案结果是这样的：

[SoOnPerson] 画布心形线

我的是这样的：

[SoOnPerson] 画布心形线

看着还不错啊，哈哈

不过女朋友说像屁股！！生气。

[SoOnPerson] 画布 心形线

相关推荐

[SoOnPerson] 画布心形线