这篇文章主要介绍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://scgulin.cn/article/gcgegs.html">http://scgulin.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/ehsos.html">JQuery全选/反选第二次失效怎么办-创新互联</a>
</li><li>
<a href="/article/ehsds.html">python不适合web开发的原因-创新互联</a>
</li><li>
<a href="/article/ehsdi.html">Android_Intent用于Activity间跳转与传值-创新互联</a>
</li><li>
<a href="/article/ehcgs.html">PHP7的数据类型有哪些-创新互联</a>
</li><li>
<a href="/article/ehsdo.html">.NET工厂方法模式的定义及实例用法-创新互联</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.cdcxhl.com/ruanwen/yingxiao" title="软文平台" target="_blank">软文平台</a></li><li><a href="http://www.sslhqy.com/" title="成都公司注册" target="_blank">成都公司注册</a></li><li><a href="https://www.cdxwcx.com/jifang/deyang.html" title="德阳服务器托管" target="_blank">德阳服务器托管</a></li><li><a href="http://www.pswzsj.com/" title="平山县网站建设" target="_blank">平山县网站建设</a></li><li><a href="http://www.cxhljz.cn/" title="成都网站建设公司" target="_blank">成都网站建设公司</a></li><li><a href="http://www.cdxtjz.cn/" title="成都网站建设" target="_blank">成都网站建设</a></li><li><a href="http://www.cdhuace.com/zhaopai.html" 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.scgulin.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号-27</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> 
建站
咨询
售后
建站咨询