PHP前端开发

html5 canvas绘制爱心的方法示例

百变鹏仔 2个月前 (10-18) #H5教程

文章标签示例

第一种方法

代码实现的一种方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>使用桃心形方程绘制爱心</title></head><body>    <canvas></canvas>    <script>        var canvas = document.querySelector(&#39;canvas&#39;);        var ctx = canvas.getContext(&#39;2d&#39;);        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; i<30; 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; i<30; 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>

文章推荐

本站为非盈利性网站,不接受任何赞助和广告。

特别声明：本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。 | 举报邮箱：344225443@qq.com

互联网ICP备案：陕ICP备2023000799号 Copyright 2023-2024 sharedbk.com All rights reserved | (c)2008-2024 共享博客