تعليق: في HTML5 ، أعتقد أن أهم شيء هو تقديم قماش ، حتى نتمكن من رسم رسومات مختلفة في الويب ، والقطن هو رسم قائم على البكسل. Canvas عبارة عن عقدة HTML مكافئة لـ Artboard ، يجب أن نرسم مع JS
في HTML5 ، أعتقد أن أهم شيء هو تقديم قماش ، حتى نتمكن من رسم رسومات مختلفة في الويب. إنه يعطي الناس شعورًا بأنهم غير واضح في هذا الصدد. في شبكة HTML5 ، هناك أيضًا رسومات قائمة على XML مثل VML و SVG. Canvas هو رسم يعتمد على البكسل. Canvas عبارة عن عقدة HTML تعادل لوحة الفنية ، ويجب أن نرسم في JS.على النحو التالي:
<canvas id = عرض mycanvas = 600 ارتفاع = 300> لا يدعم متصفحك التعريف <//canvas>.
يمكننا الحصول على كائن قماش مثل var c = document.getElementById (mycanvas) ؛ يجب إدراج طريقة سمة JS الخاصة بها على النحو التالي:
1: ارسم الكائن المقدم ، C.GetContext (2D) ، احصل على كائن الرسم ثنائي الأبعاد. بغض النظر عن عدد المرات التي نسمي فيها الكائن ، سيكون الكائن هو نفس الكائن.
2: طريقة الرسم:
Clecrect (يسار ، أعلى ، عرض ، ارتفاع) يمسح منطقة المستطيل المحددة ،
FillRect (يسار ، أعلى ، العرض ، الارتفاع) يرسم المستطيل ويملأه مع FillStyle.
FillText (Text ، X ، Y) يرسم النص ؛
strokerect (يسار ، أعلى ، عرض ، ارتفاع) يرسم المستطيل ويسحب الحدود مع Strokestyle.
BeginPath (): قم بتشغيل رسم المسار وإعادة ضبط المسار إلى الحالة الأولية ؛
Closepath (): ارسم نهايات مسار المسار ، وسوف يرسم فاصلًا مغلقًا ويضيف منحنى مغلق من موضع البداية إلى الإحداثيات الحالية ؛
Moveto (x ، y): اضبط الإحداثيات الفعلية للرسم.
Lineto (x ، y) ؛ يرسم خطًا مستقيمًا من الموضع الحالي إلى x ، y.
Fill () ، stroke () ، Clip (): آخر تعبئة وحدود مخطط تم الانتهاء من الرسم ، منطقة المقطع.
ARC (): ارسم القوس ، وضع الوسط ، بدء Radian ، وإنهاء Radian لتحديد موضع وحجم القوس ؛
المستقيم (): مسار مستطيل ؛
DrawImage (Imag IMG): ارسم الصور ؛
QuadraticCurveto (): مسار spline التربيعي ، المعلمة اثنين من نقاط التحكم ؛
Beziercurveto (): منحنى Bezier ، ثلاث نقاط تحكم من المعلمات ؛
CreateMagedata ، getimagedata ، putimagedata: هل بيانات البكسل في قماش. Imagedata هو عرض السجلات والارتفاع والبيانات ، حيث تكون البيانات هي سجل الصباغ الخاص بنا
ARGB ، وبالتالي فإن طول حجم الصفيف هو العرض*4*4 ، والترتيب RGBA على التوالي. GetImagedata هو الحصول على وحدات البكسل في المنطقة المستطيلة ، و putimagedata هي ضبط وحدات البكسل في المنطقة المستطيلة ؛
... وهلم جرا!
3: تنسيق التحول:
ترجمة (x ، y): الترجمة ، ينتقل الأصل إلى الإحداثيات (x ، y) ؛
دوران (أ): تحول الدوران ، زاوية الدوران من الدرجة ؛
المقياس (x ، y): التحول التحويلي ؛
حفظ () ، استعادة (): يوفر ومكدس ، حفظ واستعادة حالة الرسم ، حفظ يدفع حالة الرسم الحالية إلى المكدس ، ويعيد المكدس ، ويعيد حالة الرسم ؛
... وهلم جرا!
حسنًا ، لقد فات الأوان. أرفق رمز الاختبار الخاص بي:
<html>
<head>
</head>
<body>
<Canvas> لا يدعمه متصفحك </canvas>
<script type = "text/javaScript">
var عرض ، ارتفاع ، أعلى ، اليسار ؛
العرض = الارتفاع = 100 ؛
أعلى = اليسار = 5 ؛
var x = 10 ؛
var y = 10 ؛
var c = document.getElementById ("mycanvas") ؛
var maxwidth = c.width-5 ؛
var maxheight = C.Height-5 ؛
var cxt = c.getContext ("2d") ؛
cxt.strokestyle = "#00F" ؛
cxt.StrokEct (0،0 ، C.Width ، C.Height) ؛
var img = new image () ؛
img.src = "1.gif" ؛
var myInterval = null ؛
يبدأ()؛
وظيفة Refresh () {
cxt.clearrect (يسار ، أعلى ، العرض ، الارتفاع) ؛
if ((left+x)> (maxwidth width) || left+x <0) {
x = -x ؛
}
if ((top+y)> (maxheight-leight) || top+y <0) {
y = -y ؛
}
اليسار = اليسار+x ؛
TOP = TOP+Y ؛
cxt.drawImage (IMG ، اليسار ، أعلى ، العرض ، الارتفاع) ؛
cxt.font = "20pt songyi" ؛
cxt.filltext ("Breaking Wolf" ، يسار ، أعلى+25) ؛
}
وظيفة start () {
if (myInterval == null) {
myInterval = setInterval ("refresh ()" ، 100) ؛
}
}
وظيفة STOP () {
if (myInterval! = null) {
ClearInterval (MyInterval) ؛
myInterval = null ؛
}
}
دالة inrectangle (x ، y ، rectx ، recty ، rwidth ، rheight) {
إرجاع (x> = rectx && x <= rectx+rwidth) && (y> = recty && y <= recty+rheight)
}
c.onmouseover = وظيفة (e) {
if (inrectangle (e.clientx ، e.clienty ، اليسار ، أعلى ، العرض ، الارتفاع)) {
قف()؛
}
c.onmouseout = function (e) {
يبدأ()؛
}
c.onmousemove = وظيفة (e) {
if (inrectangle (e.clientx ، e.clienty ، اليسار ، أعلى ، العرض ، الارتفاع)) {
if (myInterval! = null) {
قف()؛
}
}آخر{
يبدأ()؛
}
}
}
</script>
</body>
</html>