这篇文章主要介绍HTML5 Canvas如何实现玫瑰曲线和心形图案，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联2013年至今，先为城子河等服务建站，城子河等地企业，进行企业商务咨询服务。为城子河企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
提示：把代码复制到一个html文件中并保存，直接打开即可看到效果。
实现代码：
<！DOCTYPE html>
HTML5演示</ title></p><p><style type =“ text / css”></p><p>＃apDiv1 {</p><p>position：absolute;</p><p>宽度：120像素；</p><p>高度：300像素；</p><p>z-index：1;</p><p>左：840px；</p><p>顶部：80px；</p><p>}</p><p></ style></p><p></ head></p><p><body></p><p><canvas id =“ canvas” width =“ 800” height =“ 600” style =“ border：1px solid＃c3c3c3;”></p><p>您的浏览器不支持canvas元素。</ canvas></p><p><div id =“ apDiv1”></p><p><form></p><p>函数draw（）{ var ctx = document.getElementById（'canvas'）。getContext（'2d'）; ctx.save（）; ctx.translate（400,300）; ctx.clearRect（-400，-300,800,600）; ctx.strokeStyle =“＃cc0000”;</p><p>var a = 0，b = 1，m = 6，n = 1；</p><p>m = document.forms [0] .m.value;</p><p>n = document.forms [0] .n.value;</p><p>a = document.forms [0] .a.value;</p><p>b = document.forms [0] .b.value;</p><p>drawRose（ctx，a，b，m，n）;</p><p>ctx.restore（）;</p><p>}</p><p>函数drawRose（ctx，a，b，m，n）{</p><p>ctx.beginPath（）;</p><p>var e = 0，c = 120；</p><p>var k = 2 * Math.PI / 360;</p><p>做{</p><p>var r = a / b + Math.sin（m * e / n * k）;</p><p>r = r * c;</p><p>var x = r * Math.cos（e * k）;</p><p>var y = r * Math.sin（e * k）;</p><p>e + = 0.1;</p><p>ctx.lineTo（x，y）;</p><p>} while（e <= 4320）;</p><p>ctx.stroke（）;</p><p>}</p><p>函数draw2（）{</p><p>var ctx = document.getElementById（'canvas'）。getContext（'2d'）;</p><p>ctx.save（）;</p><p>ctx.translate（400,300）;</p><p>ctx.clearRect（-400，-300,800,600）;</p><p>ctx.strokeStyle =“＃cc0000”;</p><p>ctx.beginPath（）; //ctx.moveTo(0,0）;</p><p>var e = 0，c = 150；</p><p>var k = 2 * Math.PI / 360;</p><p>做{</p><p>x = 150 * Math.cos（5/2 * e * k）+ 50 * Math.cos（15/16 * 5/2 * e * k）;</p><p>y = 150 * Math.sin（5/2 * e * k）-50 * Math.sin（15/16 * 5/2 * e * k）;</p><p>e + = 0.1;</p><p>ctx.lineTo（x，y）;</p><p>} while（e <= 3600）;</p><p>ctx.stroke（）;</p><p>ctx.restore（）;</p><p>}</p><p>函数draw3（）{</p><p>var ctx = document.getElementById（'canvas'）。getContext（'2d'）;</p><p>ctx。</p><p>ctx.translate（400,300）;</p><p>ctx.clearRect（-400，-300,800,600）;</p><p>ctx.strokeStyle =“＃ff0000”;</p><p>ctx.beginPath（）;</p><p>var x = 1，y;</p><p>做{</p><p>y = -80 *（Math.sqrt（1-x * x）+ Math.pow（x * x，1/3））;</p><p>x-= 0.001；</p><p>ctx.lineTo（100 * x，y）;</p><p>} while（x> = -1）;</p><p>做{</p><p>y = 80 *（Math.sqrt（1-x * x）-Math.pow（x * x，1/3））;</p><p>x + ＝ 0.001；</p><p>ctx.lineTo（100 * x，y）;</p><p>} while（x <= 1）;</p><p>ctx.closePath（）;</p><p>var grad = ctx.createRadialGradient（-40，-60,10，-40，-40,200）;</p><p>grad.addColorStop（0，“＃ffcc00”）;</p><p>grad.addColorStop（1，“＃ff0000”）;</p><p>ctx.fillStyle = grad;</p><p>ctx.fill（）;</p><p>// ctx.stroke（）;</p><p>ctx.restore（）;</p><p>}</p><p>window.onload = function（）{</p><p>draw（）;</p><p>}</p><p></ script></p><p></ body></p><p></ html></p><p>以上是“HTML5 Canvas如何实现玫瑰曲线和心形图案”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！</p>
<br>
网页题目：HTML5Canvas如何实现玫瑰曲线和心形图案 <br>
文章来源：<a href="http://scyingshan.cn/article/gcgegs.html">http://scyingshan.cn/article/gcgegs.html</a>
</div>
<div class="hot_new">
<div class="page_title clearfix">
<h3>其他资讯</h3>
</div>
<div class="news_list clearfix">
<ul>
<li>
<a href="/article/dgdciee.html">android手机亮屏 安卓触屏亮屏</a>
</li><li>
<a href="/article/dgdcisi.html">linuxace命令 linuxecho命令详解</a>
</li><li>
<a href="/article/dgdcidj.html">怎么储存数据至mysql 磁带怎么储存数据</a>
</li><li>
<a href="/article/dgdciec.html">电脑带括号快捷键大全 电脑带括号的快捷键</a>
</li><li>
<a href="/article/dgdcico.html">关于sketchhtml5的信息</a>
</li> </ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部信息 -->
<div class="footer wow fadeInUp">
<div class="rowFluid">
<div class="span12">
<div class="container">
<div class="footer_content">
<div class="span4 col-xm-12">
<div class="footer_list">
<div class="span6">
<div class="bottom_logo"><img src="/Public/Home/images/ewm.jpg" alt="微信服务号二维码" /></div>
</div>
<div class="span6 col-xm-12">
<div class="quick_navigation">
<div class="quick_navigation_title">快速导航</div>
<ul>
<li><a href="https://www.cdxwcx.com/city/meishan/" title="眉山做网站" target="_blank">眉山做网站</a></li><li><a href="http://m.cdxwcx.com/" title="成都网站建设公司" target="_blank">成都网站建设公司</a></li><li><a href="https://www.cdcxhl.com/h5.html" title="成都响应式网站" target="_blank">成都响应式网站</a></li><li><a href="http://www.bzwzjz.com/" title="广东网站建设" target="_blank">广东网站建设</a></li><li><a href="https://www.cdxwcx.com/jifang/meishan.html" title="联通机柜租用" target="_blank">联通机柜租用</a></li><li><a href="https://www.cdcxhl.com/douyin/" title="抖音代运营" target="_blank">抖音代运营</a></li><li><a href="https://www.cdcxhl.com/weihu/" title="企业网站维护" target="_blank">企业网站维护</a></li> </ul>
</div>
</div>
</div>
</div>
<div class="span4 col-xm-6 col-xs-12">
<div class="footer_list">
<div class="footer_link">
<div class="footer_link_title">友情链接</div>
<ul id="frientLinks">
<a href="https://www.cdcxhl.com/" title="网站制作" target="_blank">网站制作</a>
<a href="https://www.cdcxhl.com/" title="网站建设" target="_blank">网站建设</a>
<a href="https://www.cdxwcx.com/tuiguang/" title="成都网络推广" target="_blank">网络推广</a>
<a href="http://seo.cdkjz.cn/" title="成都网站推广" target="_blank">网站推广</a>
<a href="https://www.cdcxhl.com/xiaochengx.html" title="成都微信小程序开发" target="_blank">小程序开发</a>
<a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a>
</ul>
<div class="footer_link_title">网站建设</div>
<ul id="frientLinks">
<li><a href="/">营山大橙子建站</a></li>
<li><a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a></li>
</ul>
</div>
</div>
</div>
<div class="span4 col-xm-6 col-xs-12">
<div class="footer_list">
<div class="footer_cotact">
<div class="footer_cotact_title">联系方式</div>
<ul>
<li><span class="footer_cotact_type">企业：</span><span class="footer_cotact_content">青羊区大橙子信息咨询工作室</span></li>
<li><span class="footer_cotact_type">地址：</span><span class="footer_cotact_content">成都市青羊区太升南路288号</span></li>
<li><span class="footer_cotact_type">电话：</span><span class="footer_cotact_content"><a href="tel:18980820575" class="call">18980820575</a></span></li>
<li><span class="footer_cotact_type">网址：</span><span class="footer_cotact_content"><a href="/" title="营山网站建设">www.scyingshan.cn</a></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>公司名称：青羊区大橙子信息咨询工作室 联系电话：18980820575</p>
<p><a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">网站备案号：蜀ICP备2022028542号-24</a></p>
<p>营山大橙子建站 营山网站建设 营山网站设计 营山网站制作 <a href="http://www.cdxwcx.cn/" target="_blank">成都做网站</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(".technical_support_box_z_info_box img").each(function(){
var src = $(this).attr("src"); //获取图片地址
var str=new RegExp("http");
var result=str.test(src);
if(result==false){
var url = "https://www.cdcxhl.com"+src; //绝对路径
$(this).attr("src",url);
}
});
window.onload=function(){
document.oncontextmenu=function(){
return false;
}
}
</script> 
建站
咨询
售后
建站咨询