[SoOnPerson] 画布心形线

最新推荐文章于 2024-05-10 10:37:11 发布

SoOnPerson

最新推荐文章于 2024-05-10 10:37:11 发布

阅读量302

点赞数

分类专栏： html5 idea 文章标签： html5 canvas

本文链接：https://blog.csdn.net/qq_35793301/article/details/79803467

版权

idea 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html5

4 篇文章 0 订阅

订阅专栏

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

我使用的是这个公式。

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 οnlοad="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
}