html5 canvas绘制爱心的方法示例

第一种方法

!DOCTYPE htML>
    html lang="en">
    head>
        meta charset="UTF-8">
        tITle>
    使用桃心形方程绘制爱心/title>
    /head>
    body>
        canvas>
    /canvas>
        script>
            VAR canvas = document.querySelector('canvas');
            var ctx = canvas.getContext('2d');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        var Heart = function(x, y) {
                this.x = x;
                this.y = y;
                this.vertices = [];
                for(let i=0;
     i30;
 i++) {
                    var step = i / 30 * (Math.PI * 2);
//设置心上面两点之间的角度，具体分成多少份，好像需要去试。                var vector = {
                    x : (15 * Math.pow(Math.sin(step), 3)),                    y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))                }
                    this.vertices.push(vector);
            }
        }
        Heart.PRototype.draw = function() {
                ctx.translate(-1000,this.y);
    //这一步跟ctx.shadowOffsetX必须一起使用，不明白为啥？            ctx.beginPath();
                for(let i=0;
     i30;
 i++) {
                    var vector = this.vertices[i];
                    ctx.lineto(vector.x, vector.y);
            }
                ctx.shadowColor = "red";
                ctx.shadowOffsetX = this.x+1000;
                ctx.fill();
        }
        canvas.onmousedown = function(e) {
                var x = e.offsetX;
                var y = e.offsetY;
                var heart = new Heart(x, y);
                heart.draw();
        }
        /script>
    /body>
    /html>
    

以上就是HTML5 canvas绘制爱心的方法示例的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！