介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>=& lt; meta charset “gbk"比;
& lt; title> HTML5 Demo</title>
& lt; style 类型=拔谋?css"比;
# apDiv1 {
位置:绝对的;
宽度:120 px;
身高:300 px;
z - index: 1;
左:,840 px;
前:80像素;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; canvas id=癱anvas",宽度=?00“,身高=?00“,风格=氨呔?1 px solid # c3c3c3;“祝辞,
Your browser does not support 从而canvas 元素只& lt;/canvas>,
& lt; div id=癮pDiv1"祝辞
& lt; form>
玫瑰曲线方程:& lt; br>
r=a + bsin (m/n * x) & lt; br> & lt; br>
选择参数:& lt; br> & lt; br>
m: & lt; input 类型=皀umber", name=癿", min=?“, max=?9“, value=https://www.yisu.com/zixun/" 29 "/>
n:
答:
b:
<人力资源>
<人力资源>
<脚本type=" text/javascript”> 函数画(){ var ctx=. getelementbyid(画布).getContext (2 d); ctx.save (); ctx.translate (400300); ctx.clearRect (-400、-300800600); ctx。strokeStyle=" # cc0000”; var=0, b=1, m=6, n=1; m=document.forms [0] .m.value; n=document.forms [0] .n.value; 一个=document.forms [0] .a.value; b=document.forms [0] .b.value; drawRose (ctx, a, b, m, n); ctx.restore (); } 函数drawRose (ctx, a, b, m, n) { ctx.beginPath (); var e=0, c=120; var k=2 *数学。π/360; {做 var r=a/b +数学。罪(m * e/n * k); r=r * c; var x=r *数学。因为(e * k); var y=r *数学。罪(e * k); e +=0.1; ctx.lineTo (x, y); },(e <=4320); ctx.stroke (); } 函数draw2 () { var ctx=. getelementbyid(画布).getContext (2 d); ctx.save (); ctx.translate (400300); ctx.clearRect (-400、-300800600); ctx。strokeStyle=" # cc0000”; ctx.beginPath ();//ctx.moveTo (0,0); var e=0, c=150; var k=2 *数学。π/360; {做 x=150 *数学。因为(5/2 * e * k) + 50 *数学。因为(15/16 * 5/2 * e * k); y=150 *数学。罪(5/2 * e * k) - 50 *数学。罪(15/16 * 5/2 * e * k); e +=0.1; ctx.lineTo (x, y); },(e <=3600); ctx.stroke (); ctx.restore (); } 函数draw3 () { var ctx=. getelementbyid(画布).getContext (2 d); ctx.save (); ctx.translate (400300); ctx.clearRect (-400、-300800600); ctx。strokeStyle=" # ff0000”; ctx.beginPath (); var x=1, y; {做 y=-80 * (Math.sqrt (1 - x * x) + Math.pow (x * x, 1/3)); x -=0.001; ctx.lineTo (100 * x, y); },(x>=1); {做 y=80 * (Math.sqrt (1 - x * x) - Math.pow (x * x, 1/3)); x +=0.001; ctx.lineTo (100 * x, y); },(x <=1); ctx.closePath (); var研究生=ctx.createRadialGradient (-40, -60, -40, -40200); 毕业生。addColorStop(0,“去”); 毕业生。addColorStop (1 # ff0000); ctx。fillStyle=研究生; ctx.fill ();//ctx.stroke (); ctx.restore (); } 窗口。onload=function () { 画(); }>
本篇内容介绍了“怎么用HTML5画布上实现玫瑰曲线和心形图案”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
<>强效果图:
<强>提示:把代码复制到一个html文件中并保存,直接打开即可看到效果。
实现代码:
,
n:
答:
b:
<人力资源>
<人力资源>
<脚本type=" text/javascript”> 函数画(){ var ctx=. getelementbyid(画布).getContext (2 d); ctx.save (); ctx.translate (400300); ctx.clearRect (-400、-300800600); ctx。strokeStyle=" # cc0000”; var=0, b=1, m=6, n=1; m=document.forms [0] .m.value; n=document.forms [0] .n.value; 一个=document.forms [0] .a.value; b=document.forms [0] .b.value; drawRose (ctx, a, b, m, n); ctx.restore (); } 函数drawRose (ctx, a, b, m, n) { ctx.beginPath (); var e=0, c=120; var k=2 *数学。π/360; {做 var r=a/b +数学。罪(m * e/n * k); r=r * c; var x=r *数学。因为(e * k); var y=r *数学。罪(e * k); e +=0.1; ctx.lineTo (x, y); },(e <=4320); ctx.stroke (); } 函数draw2 () { var ctx=. getelementbyid(画布).getContext (2 d); ctx.save (); ctx.translate (400300); ctx.clearRect (-400、-300800600); ctx。strokeStyle=" # cc0000”; ctx.beginPath ();//ctx.moveTo (0,0); var e=0, c=150; var k=2 *数学。π/360; {做 x=150 *数学。因为(5/2 * e * k) + 50 *数学。因为(15/16 * 5/2 * e * k); y=150 *数学。罪(5/2 * e * k) - 50 *数学。罪(15/16 * 5/2 * e * k); e +=0.1; ctx.lineTo (x, y); },(e <=3600); ctx.stroke (); ctx.restore (); } 函数draw3 () { var ctx=. getelementbyid(画布).getContext (2 d); ctx.save (); ctx.translate (400300); ctx.clearRect (-400、-300800600); ctx。strokeStyle=" # ff0000”; ctx.beginPath (); var x=1, y; {做 y=-80 * (Math.sqrt (1 - x * x) + Math.pow (x * x, 1/3)); x -=0.001; ctx.lineTo (100 * x, y); },(x>=1); {做 y=80 * (Math.sqrt (1 - x * x) - Math.pow (x * x, 1/3)); x +=0.001; ctx.lineTo (100 * x, y); },(x <=1); ctx.closePath (); var研究生=ctx.createRadialGradient (-40, -60, -40, -40200); 毕业生。addColorStop(0,“去”); 毕业生。addColorStop (1 # ff0000); ctx。fillStyle=研究生; ctx.fill ();//ctx.stroke (); ctx.restore (); } 窗口。onload=function () { 画(); }>