简单创意JS之画心

最新推荐文章于 2023-05-14 18:49:38 发布

智糖之糖

最新推荐文章于 2023-05-14 18:49:38 发布

阅读量423

点赞数 1

文章标签： js javascript html

本文链接：https://blog.csdn.net/qq_28485747/article/details/113497515

版权

简单创意JS之画心

1、画线稿

2、写代码

2.1 HTML

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>心</title>
    </head>
    <body>
        <canvas id="heart" width="300px" height="300px">心</canvas > 
    </body>
    <script type="text/javascript" src="heart.js"></script>
    <script>
        var c = document.getElementById("heart");
        var ctx=c.getContext("2d");
        //圆心
        var x0 = c.width/2;//坐标X
        var y0 = c.height/2;//坐标y
        var r = c.width/5;//圆半径
        getHeart(x0,y0,r);
    </script>
</html>

2.2 JS

//心
function getHeart(x,y,r){
    //中间
    getCircle(ctx,x,y,r);
    //右上部分
    var x1 = x-Math.sin(Math.PI/4)*r;//sin45°
    var y1 = y-Math.sin(Math.PI/4)*r;//sin45°
    getCircle(ctx,x1,y1,r);
    //左上部分
    var x2 = x+Math.sin(Math.PI/4)*r;//sin45°
    var y2 = y-Math.sin(Math.PI/4)*r;//sin45°
    getCircle(ctx,x2,y2,r);
    //下部分
    var x3 = x1-Math.sin(Math.PI/4)*r;//sin45°
    var y3 = y1+Math.sin(Math.PI/4)*r;//sin45°
    var x4 = x2+Math.sin(Math.PI/4)*r;//sin45°
    var y4 = y2+Math.sin(Math.PI/4)*r;//sin45°
    var x5 = x0; 
    var y5 = y+2*r*0.7; 
    getPolygon(ctx,x3,y3,x4,y4,x5,y5)
}
//ctx,x,y,r  圆
function getCircle(ctx,x,y,r){
    ctx.beginPath();
    ctx.fillStyle="red";
    ctx.arc(x,y,r,0,2*Math.PI);
    ctx.closePath();
    ctx.fill();
}
//多边型
function getPolygon(ctx,x3,y3,x4,y4,x5,y5){
    ctx.beginPath();
    ctx.moveTo(x3,y3);
    ctx.lineTo(x4,y4);
    ctx.lineTo(x5,y5);
    ctx.closePath();
    ctx.strokeStyle = "red";
    ctx.stroke();
    ctx.fill();
}

3、效果图

智糖之糖

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
简单创意JS之画心

简单创意JS之画心1、画线稿2、写代码2.1 HTML<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>心</title> </head> <body> <canvas id="heart" wi
复制链接

扫一扫