这篇文章主要介绍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://cqcxhl.com/article/gcgegs.html">http://cqcxhl.com/article/gcgegs.html</a>
</div>
</div>
<div class="other">
<h3>其他资讯</h3>
<ul>
<li>
<a href="/article/dgscsjg.html">人民币样式css 人民币样式图片</a>
</li><li>
<a href="/article/dgscspi.html">jquery控制边框 jquery控制显示和隐藏</a>
</li><li>
<a href="/article/dgscsps.html">jquery获取源码 jQuery获取元素</a>
</li><li>
<a href="/article/dgsceod.html">微信的企业群怎么关掉 微信的企业群怎么关掉语音通话</a>
</li><li>
<a href="/article/dgsceoj.html">jquery九大 jquery包括哪三部分</a>
</li> </ul>
</div>
</div>
<div class="footer">
<div class="footer_content">
<div class="footer_content_top clear">
<div class="content_top_share fl">
<div><img src="/Public/Home/img/logo.png"></div>
<div class="top_share_content">
<dd>分享至：</dd>
<dt class="bdsharebuttonbox clear" id="share">
<a href="#" class="bds_tsina iconfont fl" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_sqq iconfont fl" data-cmd="sqq" title="分享到QQ好友"></a>
<a href="#" class="bds_weixin iconfont fl" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_weixin iconfont fl" data-cmd="tieba" title="分享到贴吧"></a>
</dt>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
</div>
</div>
<div class="content_top_left fl clear">
<div class="top_left_list fl">
<dd><a href="/about/">关于我们</a></dd>
<dt>
<a href="/about/#gsjj">公司简介</a>
<a href="/about/#fzlc">发展历程</a>
</dt>
</div>
<div class="top_left_list fl">
<dd><a href="/service/">服务项目</a></dd>
<dt>
<a href="/service/">高端网站建设</a>
<a href="/miniprogram/">小程序开发</a>
<a href="/service/app.html">APP开发</a>
<a href="/service/yingxiao.html">网络营销</a>
</dt>
</div>
<div class="top_left_list fl">
<dd><a href="/jianzhan/">建站知识</a></dd>
<dt>
<a href="/jianzhan/2.html">网站建设</a>
<a href="/jianzhan/3.html">网站设计</a>
<a href="/jianzhan/4.html">网站制作</a>
<a href="/jianzhan/5.html">小程序</a>
</dt>
</div>
<div class="top_left_list fl">
<dd><a href="/contact/">联系我们</a></dd>
<dt>
<a href="/contact/#lxwm">公司地址</a>
<a href="/contact/#rczp">人才招聘</a>
</dt>
</div>
</div>
<div class="content_top_right addressR fr">
<div class="top_right_title addressf_title">
<a href="javascript:;" class="on">成都</a>
<a href="javascript:;">重庆</a>
</div>
<div class="top_right_content addressf">
<div class="right_content_li on">
<div class="right_content_list clear">
<dd class="fl iconfont"></dd>
<dt class="fl">电话：028-86922220</dt>
</div>
<div class="right_content_list clear">
<dd class="fl iconfont"></dd>
<dt class="fl">地址：成都市太升南路288号锦天国际A幢1002号</dt>
</div>
</div>
<div class="right_content_li">
<div class="right_content_list clear">
<dd class="fl iconfont"></dd>
<dt class="fl">电话：028-86922220</dt>
</div>
<div class="right_content_list clear">
<dd class="fl iconfont"></dd>
<dt class="fl">地址：重庆市南岸区弹子石腾龙大道58号2栋21-6</dt>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer_content_copyright clear">版权所有：成都创新互联科技有限公司重庆分公司
<a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">渝ICP备2021005571号-4</a>
</div>
</div>
<!--浮窗-->
<div class="FloatingWindow clear">
<a href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="FloatingWindow_list fr">
<div class="FloatingWindow_list_title">
<dd class="iconfont"></dd>
<dt><span>在线</span>咨询</dt>
</div>
</a>
<a href="javascript:;" class="FloatingWindow_list fr">
<div class="FloatingWindow_list_title">
<dd class="iconfont"></dd>
<dt>服务热线</dt>
</div>
<div class="FloatingWindow_list_down fadeInRight animated">服务热线：028-86922220</div>
</a>
<a href="javascript:;" class="FloatingWindow_list fr STop">
<div class="FloatingWindow_list_title">
<dd class="iconfont"></dd>
<dt>TOP</dt>
</div>
</a>
</div>
<script src="/Public/Home/js/jquery-1.8.3.min.js"></script>
<script src="/Public/Home/js/comm.js"></script>
<script src="/Public/Home/js/wow.js"></script>
<script src="/Public/Home/js/common.js"></script>
</body>
</html>
<script>
$(".con 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);
}
});
</script> 
重庆分公司
