قماش HTML5 - رمز مثال الرسوم الرسم + مخطط تأثير لرسم الأقواس والتدوير

تعليق: قبل القيام بعملية الدوران ، يجب أن تفهم جملة واحدة: الدوران هو نظام الإحداثيات للقماش بدلاً من الشكل نفسه. أولاً ، دعونا نفهم إحداثيات الدائرة: المركز ، زاوية البداية ، زاوية النهاية ؛ التالي بسيط للغاية

أولاً ، دعونا نفهم إحداثيات الدائرة:

<script language = "javaScript">

var cxt = document.getElementById ('Demo'). getContext ("2d") ؛

cxt.beginpath () ؛

CXT.ARC (100،100،50 ، Math.PI*0.75 ، Math.PI*1.75 ، false) ؛/*ارسم قوسًا نصف دائري مع إحداثيات مركزية قدرها 100،100 ؛ start Radian هو 0.75 ، و end راديان هو 1.75 ، المعلمة الأخيرة خطأ = عقارب الساعة ، صحيح = عكس اتجاه عقارب الساعة ، بالطبع ، هذه المعلمة اختيارية*/

cxt.fillstyle = "#f00" ؛/*حدد اللون لاستخدام*/

cxt.fill () ؛/*خطوة واحدة لرسم الشكل على اللوحة ، ارسم أول دائرة نصف دائرة*/

/*يفضل رسم نصف الدائرة الثانية*/

cxt.beginpath () ؛

CXT.ARC (170،100،50 ، Math.PI*1.25 ، Math.PI*0.25 ، false) ؛

cxt.fillStyle = "#f00" ؛

cxt.fill () ؛/*ارسم الرسومات المرسومة على القماش*/

cxt.beginpath () ؛

/*تدوير القماش في اتجاه عقارب الساعة بمقدار 45 درجة. معلمة وظيفة الدوران هي راديان ، لذلك تحتاج إلى تحويلها */

cxt.rotate (45*Math.pi/180) ؛

cxt.fillrect (141.1 ، -50،100،100) ؛/*إحداثيات البداية هي 141.1 ، -50 ، والعرض والارتفاع 100*/

cxt.fillStyle = "#f00" ؛

cxt.fill () ؛

cxt.beginpath () ؛

/*قم بتدوير القماش إلى زاوية عادية*/

cxt.rotate (-45*math.pi/180) ؛

cxt.font = "60px microsoft yahei" ؛

cxt.strokestyle = "#f00" ؛

cxt.stroketext ("أنا أحب html5" ، 0،300) ؛/*معلمتان ، الأول هو البدء في رسم إحداثيات المحاور x للنص ، والثاني هو البدء

cxt.stroke () ؛

/*إنشاء التدرج*/

var grd = cxt.createlineargradient (0،45،175،50) ؛/*المعلمات الأربعة هي نقطة بدء التدرج x ، y نقطة التدرج y ، y*/

grd.addcolorstop (0 ، "#ff0000") ؛

grd.addcolorstop (0.25 ، "#ffff00") ؛

grd.addcolorstop (0.5 ، "#00FF00") ؛

grd.addcolorstop (0.75 ، "#00ffff") ؛

grd.addcolorstop (1 ، "#ffff00") ؛

cxt.strokestyle = grd ؛

cxt.stroketext ("أنا أحب القماش" ، 0،400) ؛/*معلمتان ، الأول هو البدء في رسم إحداثيات المحاور X للنص ، والثاني هو البدء

cxt.stroke () ؛

</script>

صورة التكاثر: