神奇的Canvas贝塞尔曲线画心，程序员的表白-原创手记-慕课网

神奇的Canvas贝塞尔曲线画心，程序员的表白

时间丶思考 2016-10-25 09:57:55 浏览 11385

时间丶思考

关注TA

手记 7

粉丝 26

获赞 340

学习了慕课的html5 canvase自己尝试用贝赛尔曲线画心，怎么样？是不是很酷？各位小伙伴，我画了一个心的轮廓，大家可以在此基础上自己加工，表白的时候到了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;"></canvas>
</div>

</body>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext('2d');
        canvas.width = 800;
        canvas.height = 800;
        drawHeart(ctx,400,400,50,30);
    }

    function drawHeart(ctx,x,y,R,rot) {
        ctx.save();
        ctx.translate(x,y);
        ctx.rotate(rot/180*Math.PI);
        ctx.scale(R, R);
        heartPath(ctx);
        /*ctx.strokeStyle = "red";
        ctx.lineWidth = "3px";*/
        ctx.fillStyle = "red";
        ctx.shadowColor = "gray";
        ctx.shadowOffsetX = 5;
        ctx.shadowOffsetY = 5;
        ctx.shadowBlur = 5;
        ctx.fill();
        //ctx.stroke();
        ctx.restore();
    }
    function heartPath(ctx) {
        ctx.beginPath();
        ctx.arc(-1,0,1,Math.PI,0,false);
        ctx.arc(1,0,1,Math.PI,0,false);
        //貝塞尔曲线画心
        ctx.bezierCurveTo(1.9, 1.2, 0.6, 1.6, 0, 3.0);
        ctx.bezierCurveTo( -0.6, 1.6,-1.9, 1.2,-2,0);
        ctx.closePath();
    }
</script>

</html>

27人推荐

发表评论