تعليق: لن أجرب التكنولوجيا التي لا تدعمها Microsoft كثيرًا. عندما تقول Microsoft أنها ستدعم ذلك ، سأحاول ذلك. ربما اعتدت على متابعة طريق Microsoft ، لكن من الغباء جدًا التفكير في الأمر.
MVC شيء جيد. لماذا لا تتعلمها عند دخول الصناعة؟ عليك الانتظار حتى يخرج ASP.NET MVC قبل أن تتعلمه ؛ ORM شيء جيد ، لماذا عليك الانتظار حتى يخرج EF قبل أن تتعلمه ؛ HTML5 شيء جيد ، لماذا عليك الانتظار حتى يخرج IE9 قبل أن تتعلمه؟ ......-أعتقد أنني يجب أن أتخلص من هذه العادة السيئة.
لا مزيد من الهراء.
المتطلبات: تقليد وظيفة رسم نقاط مرساة للصور في Dreamweaver وإنشاء قيم التنسيق في رمز HTML.
التحليل الفني: يخبرني الحدس أن HTML5 Canvas مختصة.
نظرًا لأنني لم أشارك مطلقًا في القماش في جوهر ولم أر سوى عروض تجريبية طورها الآخرون باستخدام قماش ، كان عليّ أن أقوم بالتعليمي على قماش HTML5. اكتشف الرابط التالي:
بعد قراءة المستند ، اكتب الرمز:
تحليل الكود:
1.1 HTML: استخدم صورة كقاعدة ووضعها عليها لرسم الصور
1.2 CSS: على الأقل تحتاج إلى وضع الوضع الصحيح ، ويجب أن يكون المكان الشفاف شفافًا.
1.3 JavaScript: Mousedown ، Mousemove ، Mouseup
<viv>
<img src = "http://www.vevb.com/uploads/allimg/130720/10022r603_0.jpg"/>
<canvas>
<p> بعض المعلومات لإخبار الأشخاص الذين لا يدعم Broswer HTML5 </p>
</canvas>
</div>
قد يعلم الطلاب ذوي الخبرة أن هذا مقدر أن يكون مأساة عندما ينظرون إلى رمز HTML5. عندما يكون هناك عنصر IMG تحت القماش ، فإن القماش سيكون غير شفاف بغض النظر عن السبب. لقد نسيت ما إذا كان بإمكاني رسم شيء ما على القماش ، والذي لا ينبغي أن ينجح. يبدو أن عنصر القماش هذا له نظافة ولا يرغب في أن يكون مع عناصر أخرى منخفضة المستوى. حتى لو كنت أرغب في تسوية ثاني أفضل ما في ذلك ، فلن يعمل كعنصر خلفية في Cantainer. شعوري هو أن هذه القماش قد لا تكون شفافة للعناصر الأخرى. لذا فإن الرمز أعلاه هو في الواقع الرمز الخاطئ ...
فكيف يمكننا تحقيق تأثيرات مماثلة للطبقات في Photoshop؟ وهذا هو الحصول على عدد قليل من عناصر القماش ، واستبدال IMG أعلاه مع قماش ، ثم رسم IMG على هذه القماش ، بحيث تكون اللوحة شفافة للقطن. للأسف ... الرمز كما يلي:
<viv>
<Canvas> </tanvas>
<canvas>
<p> بعض المعلومات لإخبار الأشخاص الذين لا يدعم Broswer HTML5 </p>
</canvas>
</div>
حسنًا ، يتم تنفيذ HTML ، والخطوة التالية هي الرسم على قماش. بمساعدة JavaScript ، هذه المهمة بسيطة للغاية.
window.addeventListener ('load' ، function () {
// الحصول على عنصر قماش.
var elem = document.getElementById ('bg') ؛
if (! elem ||! elem.getContext) {
يعود؛
}
// احصل على سياق قماش 2D.
var context = elem.getContext ('2d') ؛
if (! context ||! context.drawimage) {
يعود؛
}
// إنشاء صورة جديدة.
var img = new image () ؛
// بمجرد تحميلها ، ارسم الصورة على القماش.
img.addeventListener ('load' ، function () {
// الدقة الأصلية: x ، y.
context.drawImage (هذا ، 0 ، 0) ؛
// الآن تغيير حجم الصورة: x ، y ، w ، h.
context.drawImage (هذا ، 160 ، 0 ، 120 ، 70) ؛
// crop وتغيير حجم الصورة: sx ، sy ، sw ، sh ، dx ، dy ، dw ، dh.
context.drawImage (هذا ، 8 ، 20 ، 140 ، 50 ، 0 ، 150 ، 350 ، 70) ؛
}، خطأ شنيع)؛
img.src = 'http://www.vevb.com/uploads/allimg/130720/10022r603_0.jpg' ؛
}، خطأ شنيع)؛
// يرجى ملاحظة أن الكود الذي تم التقاطه مباشرة في المستند ضروري لأحداث Opera و IE9 Onload ، وإلا فإن الصورة ستكون فارغة ، بالطبع ، لن يكون هذا هو الحال تحت Chrome.
يتبع...
العنوان الأصلي