HTML5Canvas如何实现玫瑰曲线和心形图案
这篇文章主要介绍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://abwzjs.com/article/gcgegs.html">http://abwzjs.com/article/gcgegs.html</a>
</div>
</div>
<div class="contentr fr">
<h3>其他资讯</h3>
<ul>
<li>
<a href="/article/pepsds.html">z-index属性指的是什么</a>
</li><li>
<a href="/article/pepche.html">RDBMS能实现的专门关系运算包括什么</a>
</li><li>
<a href="/article/pepcgs.html">JavaWeb文件的上传和下载功能简单实现代码</a>
</li><li>
<a href="/article/pepsos.html">python32位和64位版本有什么不同的地方呢</a>
</li><li>
<a href="/article/pepchp.html">SpringCloudNetflix中Eureka的服务注册与发现有什么</a>
</li> </ul>
</div>
</div>
</div>
<!--底部-->
<footer>
<div class="foot">
<div class="container">
<h1>大橙子建站您身边的网站建设服务商</h1>
<div class="foot1">
<ul>
<li>
<dl><i class="iconfont"></i><b>地址ADDRESS</b></dl>
<p>四川-阿坝青羊区太升南路288号<br>
锦天国际A座10楼
</p>
</li>
<li>
<dl><i class="iconfont"></i><b>电话/TEL</b></dl>
<p><a href="tel:02886922220" target="_blank">028 86922220</a> (工作日)<br>
<a href="tel:18980820575" target="_blank">1898082 0575</a> ( 7x24 )
</p>
</li>
<li>
<dl><i class="iconfont"></i><b>QQ咨询</b></dl>
<p> 244261566 (售前)<br>
631063699 (售后)
</p>
</li>
<li>
<dl><i class="iconfont"></i><b>邮箱/E: mail</b></dl>
<p> service@cdcxhl.com (业务)<br>
hr@cdcxhl.com (求职)
</p>
</li>
</ul>
</div>
<div class="link">
友情链接：
<a href="https://www.xwcx.net/zuyong.html" title="成都服务器租用" target="_blank">成都服务器租用</a> <a href="http://chengdu.cdcxhl.cn/H5/
" title="响应式网站设计" target="_blank">响应式网站设计</a> <a href="https://www.cdcxhl.com/weihu/chengdu.html" title="成都网站维护公司" target="_blank">成都网站维护公司</a> <a href="http://www.cdkjz.cn/wangzhan/" title="成都网站推广" target="_blank">成都网站推广</a> <a href="http://www.pxzwz.com/" title="小谭建站" target="_blank">小谭建站</a> <a href="http://www.36103.cn/" title="成都网站制作" target="_blank">成都网站制作</a> <a href="http://www.cxjianzhan.com/" title="成都网站建设" target="_blank">成都网站建设</a> <a href="http://www.gytzsp.com/" title="天泽尚品装饰" target="_blank">天泽尚品装饰</a> <a href="http://www.huineicun.com/" title="广安园林绿化公司" target="_blank">广安园林绿化公司</a> <a href="http://www.cdxwcx.cn/tuoguan/zigong.html" title="自贡主机托管" target="_blank">自贡主机托管</a> </div>
</div>
</div>
<div class="copy container">
Copyright © 2017-2022 All Rights Reserved. 青羊区大橙子信息咨询工作室 版权所有 <a href="http://www.beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2022028542号-9</a>
[原创设计,独立版权。未经许可.不得拷贝或镜像]<br>
<a href="http://www.kswsj.cn/" target="_blank">网站营销推广</a> | <a href="https://www.cdcxhl.com/pinpai.html" target="_blank">品牌网站设计</a> | <a href="http://www.cdweb.net/" target="_blank">自适应网站建设</a> | <a href="http://cdkjz.cn/wangzhan/pinpai/" target="_blank">品牌网站建设</a> | <a href="http://chengdu.cdxwcx.cn/" target="_blank">成都网站制作</a> | <a href="https://www.cdcxhl.com/cloud/" target="_blank">云服务器</a> | <a href="https://www.cdcxhl.com/weihu/abazhou.html" target="_blank">阿坝网站维护</a> | (阿坝网站建设QQ : 631063699 )</div>
</footer>
<!--在线咨询-->
<div class="fot">
<ul>
<li>
<a href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" target="_blank">
<img src="/Public/Home/img/fot1.png" alt="建站咨询">
<p>在线咨询</p>
</a>
</li>
<li>
<a href="tel:18980820575" target="_blank">
<img src="/Public/Home/img/fot2.png" alt="建站电话">
<p>拨打电话</p>
</a>
</li>
</ul>
</div>
</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);
}
});
window.onload=function(){
document.oncontextmenu=function(){
return false;
}
}
</script> 