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/hejdej.html">python自建函数题目 python 自建函数</a> </li><li> <a href="/article/hejdds.html">python指数函数绘制,python绘制指数函数图像</a> </li><li> <a href="/article/hejdso.html">php数据库搭建实例 php数据库怎么创建</a> </li><li> <a href="/article/hejdep.html">java排序课程表代码 java排序课程表代码怎么用</a> </li><li> <a href="/article/hejopj.html">linux命令输错了,linux命令输错怎么返回</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.cdhuace.com/fuwu.html" title="成都名片印刷厂" target="_blank">成都名片印刷厂</a>   <a href="http://www.csruizhi.cn/" title="崇州网站制作" target="_blank">崇州网站制作</a>   <a href="http://www.ruijiemsc.com/" title="瑞杰企业管理" target="_blank">瑞杰企业管理</a>   <a href="https://www.xwcx.net/tuoguan.html" title="四川电信机房托管" target="_blank">四川电信机房托管</a>   <a href="http://www.njwuji.cn/" title="亮美家" target="_blank">亮美家</a>   <a href="http://www.sczjjy.com/" title="四川中宇建业" target="_blank">四川中宇建业</a>   <a href="http://www.cdhuace.com/zhangui.html" title="成都展柜制作" target="_blank">成都展柜制作</a>   <a href="http://www.cdhuace.com/led.html" title="LED显示屏" target="_blank">LED显示屏</a>   <a href="http://www.lzluxian.com/" title="正泰动物" target="_blank">正泰动物</a>   <a href="http://www.yafdjwx.com/" title="项目咨询" target="_blank">项目咨询</a>    </div> </div> </div> <div class="copy container"> Copyright