مثال على إنشاء لعبة تاي تشي الدوارة باستخدام اللوحة القماشية

الكاتب：Eve Cole وقت التحديث：2025-02-01 12:00:03

مقدمة

لم أتطرق إلى اللوحة القماشية منذ فترة طويلة، وأردت فجأة مراجعتها بعد ظهر هذا اليوم، لذلك كتبت تاي تشي الدوارة، إنها ممتعة للغاية، وسأعرض عملية كتابتها هنا ، وليس القماش نفسه، وآمل ألا يشتكي الرجال الكبار.

المغلق

 body{ الخلفية: #ddd;}#canvas{ الموضع: اليسار المطلق: 40%; الأعلى: 30%; %,-50%); -ms-transform: ترجمة(-50%,-50%); -o-تحويل: ترجمة(-50%,-50%)); ترجمة (-50٪، -50٪)؛ -webkit-animation: testAnimate 3s خطي لا نهائي؛ -o-animation: testAnimate 3s خطي لا نهائي؛}@keyframes testAnimate { from { -webkit-transform: تدوير (0)؛ -moz-تحويل: تدوير (0)؛ -o-تحويل: تدوير (0)؛ تحويل: تدوير (0) } إلى { -تحويل webkit: تدوير (360 درجة)؛ -moz-تحويل: تدوير (360 درجة)؛ تحويل: تدوير (360 درجة }})؛

أتش تي أم أل

 <body> <canvas id=canvas width=500 height=500></canvas></body>

 Let ctx = document .getElementById(canvas) .getContext(2d);// left-black-bigctx.beginPath();ctx.fillStyle = #000;ctx.arc(250,250,200,Math.PI/2,Math.PI* 1.5,false);ctx. ClosePath();ctx.fill();// right-white-bigctx.beginPath();ctx.fillStyle = #fff;ctx.arc(250,250,200,Math.PI/2,Math.PI*1.5,true);ctx. ClosePath();ctx.fill(); // top-black-middlectx.beginPath();ctx.fillStyle = #000;ctx.arc(250,150,100,Math.PI/2,Math.PI*1.5,true);ctx. ClosePath();ctx.fill();// Bottom-white-middlectx.beginPath();ctx. fillStyle= #fff;ctx.arc(250,350,100,Math.PI/2,Math.PI*1.5,false);ctx. ClosePath();ctx.fill();// top-white-smallctx.beginPath();ctx. fillStyle= #fff;ctx.arc(250,150,25,0,Math.PI*2);ctx. ClosePath();ctx.fill();// Bottom-black-smallctx.beginPath();ctx.fillStyle = #000;ctx.arc(250,350,25,0,Math.PI*2);ctx. ClosePath();ctx.fill();

تأثير

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.