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://myzitong.com/article/gcgegs.html">http://myzitong.com/article/gcgegs.html</a> </div> </div> <div class="contentr fr"> <h3>其他资讯</h3> <ul> <li> <a href="/article/ddjoeoi.html">java计算器源代码资源 java计算器简单代码</a> </li><li> <a href="/article/ddjoeoo.html">包含sap系统带来的变化的词条</a> </li><li> <a href="/article/ddjosii.html">linux下属命令 linux中命令的用法</a> </li><li> <a href="/article/ddjosgc.html">阿里云怎么进行搬迁服务器 阿里云怎么进行搬迁服务器操作</a> </li><li> <a href="/article/ddjoshg.html">智能聊天对秘书专业分影响的简单介绍</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="http://www.cxjianzhan.com/baojia/" title="网站建设费用" target="_blank">网站建设费用</a>   <a href="http://www.cdxwcx.cn/tuoguan/xiyun.html" title="中国(西部)云计算中心" target="_blank">中国(西部)云计算中心</a>   <a href="http://www.myzitong.com/" title="绵阳梓潼做网站" target="_blank">绵阳梓潼做网站</a>   <a href="http://www.shouzuofang.com/" title="shouzuofang.com" target="_blank">shouzuofang.com</a>   <a href="http://www.cdkjz.cn/fangan/led/" title="LED网站设计方案" target="_blank">LED网站设计方案</a>   <a href="http://www.cdxwcx.cn/tuoguan/mianyang.html" title="四川绵阳主机托管" target="_blank">四川绵阳主机托管</a>   <a href="http://www.cdxwcx.cn/tuoguan/deyang.html" title="德阳机房托管" target="_blank">德阳机房托管</a>   <a href="http://www.dyfdjzy.com/" title="dyfdjzy.com" target="_blank">dyfdjzy.com</a>   <a href="http://seo.cdkjz.cn/wangzhan/" title="网站优化公司" target="_blank">网站优化公司</a>   <a href="http://www.lhwzsj.com/" title="传美奇电器" target="_blank">传美奇电器</a>    </div> </div> </div> <div class="copy container"> Copyright