铁雪资源网 Design By www.gsvan.com
提示:把代码复制到一个html文件中并保存,直接打开即可看到效果。
实现代码:
<!DOCTYPE html> <html> <head> <meta charset = "gbk"> <title>HTML5 Demo</title> <style type="text/css"> #apDiv1 { position:absolute; width:120px; height:300px; z-index:1; left: 840px; top: 80px; } </style> </head> <body> <canvas id="canvas" width="800" height="600" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <div id="apDiv1"> <form> 玫瑰曲线方程:<br> r=a+bsin(m/n*x)<br><br> 选择参数:<br><br> m: <input type="number" name="m" min="2" max="29" value="29"/><br><br> n: <input type="number" name="n" min="1" max="12" value="11"/><br><br> a: <input type="number" name="a" min="0" max="5" value="1"/><br><br> b: <input type="number" name="b" min="1" max="7" value="5"/><br><br> <input type="button" value=" 画 图 " onClick="draw();"><br><br> <hr><br> <input type="button" value=" 画 图 2 " onClick="draw2();"><br><br> <hr><br> <input type="button" value=" 心形图 " onClick="draw3();"><br> </form> </div> <script type="text/javascript"> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); ctx.translate(400,300); ctx.clearRect(-400,-300,800,600); ctx.strokeStyle = "#cc0000"; var a = 0, b = 1, m = 6, n = 1; m = document.forms[0].m.value; n = document.forms[0].n.value; a = document.forms[0].a.value; b = document.forms[0].b.value; drawRose(ctx,a,b,m,n); ctx.restore(); } function drawRose(ctx,a,b,m,n){ ctx.beginPath(); var e = 0, c = 120; var k = 2 * Math.PI / 360; do { var r = a/b + Math.sin( m * e / n * k); r = r * c; var x = r * Math.cos( e * k ); var y = r * Math.sin( e * k ); e += 0.1; ctx.lineTo(x,y); } while ( e <= 4320 ); ctx.stroke(); } function draw2(){ var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); ctx.translate(400,300); ctx.clearRect(-400,-300,800,600); ctx.strokeStyle = "#cc0000"; ctx.beginPath(); //ctx.moveTo(0,0); var e = 0, c = 150; var k = 2 * Math.PI / 360; do { x = 150*Math.cos( 5/2 * e*k ) + 50*Math.cos( 15/16 * 5/2 * e*k ); y = 150*Math.sin( 5/2 * e*k ) - 50*Math.sin( 15/16 * 5/2 * e*k ); e += 0.1; ctx.lineTo(x,y); } while ( e <= 3600 ); ctx.stroke(); ctx.restore(); } function draw3(){ var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); ctx.translate(400,300); ctx.clearRect(-400,-300,800,600); ctx.strokeStyle = "#ff0000"; ctx.beginPath(); var x = 1, y; do { y = -80*(Math.sqrt(1-x*x) + Math.pow(x*x,1/3)); x -= 0.001; ctx.lineTo(100*x,y); } while ( x >= -1 ); do { y = 80*(Math.sqrt(1-x*x) - Math.pow(x*x,1/3)); x += 0.001; ctx.lineTo(100*x,y); } while ( x <= 1 ); ctx.closePath(); var grad = ctx.createRadialGradient(-40,-60,10,-40,-40,200); grad.addColorStop(0, "#ffcc00"); grad.addColorStop(1, "#ff0000"); ctx.fillStyle = grad; ctx.fill(); // ctx.stroke(); ctx.restore(); } window.onload = function (){ draw(); } </script> </body> </html>
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无HTML5 Canvas实现玫瑰曲线和心形图案的代码实例的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?