تعليق: يقدم هذا المقال بشكل أساسي أمثلة رمز لقماش HTML5 لتنفيذ منحنيات الورد والأنماط على شكل قلب. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
صورة التكاثر:
نصيحة: انسخ الرمز إلى ملف HTML وحفظه ، وفتحه مباشرة لرؤية التأثير.
رمز التنفيذ:
<! doctype html>
<html>
<head>
<meta charset = "gbk">
<title> HTML5 DEMO </title>
<type type = "text/css">
#apdiv1 {
الموقف: مطلق ؛
العرض: 120 بكسل ؛
الارتفاع: 300 بكسل ؛
Z-index: 1 ؛
اليسار: 840 بكسل ؛
أعلى: 80 بكسل ؛
}
</style>
</head>
<body>
<canvas>
لا يدعم متصفحك عنصر القماش. </canvas>
<viv>
<Porm>
معادلة منحنى الورد:
r = a+bsin (m/n*x)
حدد المعلمات:
M: <إدخال type = "number" min = "2" max = "29" value = "29"/>
n: <إدخال type = "number" min = "1" max = "12" value = "11"/>
A: <إدخال type = "number" min = "0" max = "5" value = "1"/>
B: <إدخال type = "number" min = "1" max = "7" value = "5"/>
<type type = "button" value = "draw">
<hr>
<type type = "button" value = "Drawing 2">
<hr>
<type type = "button" value = "Heart Chart">
</form>
</div>
<script type = "text/javaScript">
وظيفة draw () {
var ctx = document.getElementById ('canvas'). getContext ('2d') ؛
ctx.save () ؛
ctx.translate (400300) ؛
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 () ؛
}
دالة DrawRose (CTX ، A ، B ، M ، N) {
ctx.beginpath () ؛
var e = 0 ، c = 120 ؛
var K = 2 * Math.PI / 360 ؛
يفعل {
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) ؛
} بينما (e <= 4320) ؛
ctx.stroke () ؛
}
وظيفة draw2 () {
var ctx = document.getElementById ('canvas'). getContext ('2d') ؛
ctx.save () ؛
ctx.translate (400300) ؛
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 ؛
يفعل {
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) ؛
} بينما (e <= 3600) ؛
ctx.stroke () ؛
ctx.restore () ؛
}
وظيفة draw3 () {
var ctx = document.getElementById ('canvas'). getContext ('2d') ؛
ctx.save () ؛
ctx.translate (400300) ؛
CTX.ClearRect (-400 ، -300،800،600) ؛
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 grad = ctx.createDialGradient (-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 () {
يرسم()؛
}
</script>
</body>
</html>