التعليق: يقدم هذا المقال بشكل أساسي تأثير أزرار لعب الألوان الأربعة المرسومة باستخدام قماش JavaScript و HTML5. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
<Canvas> </tanvas> هي علامة جديدة تظهر في HTML5. مثل جميع كائنات DOM ، يكون لها خصائصها وطرقها وأحداثها ، بما في ذلك طرق الرسم. يمكن أن تسميها JS للرسم. تستخدم هذه المقالة علامة القماش وجافا سكريبت لرسم تأثير زر تشغيل التدرج بأربعة ألوان. صورة التأثير:
رمز التنفيذ:
<html>
<head>
<meta http-equiv = "content-type" content = "text/html ؛ charset = gbk">
<title> ارسم زر </title>
</head>
<body>
<Canvas> لا يدعم متصفحك القماش ، يرجى ترقية متصفحك! </canvas>
<script type = "text/javaScript">
var canvas = document.getElementById ('mycanvas') ؛/*احصل على قماش محدد*/
var ctx = canvas.getContext ('2d') ؛/*ارسم في بيئة ثنائية الأبعاد*/
DrawPlayButton (CTX ، 200200) ؛
DrawPlayButton (CTX ، 400،200) ؛
DrawPlayButton (CTX ، 300،200) ؛
دالة DrawPlayButton (_context ، x ، y) {
var nradius = 30 ؛ // نصف القطر
_context.save () ؛
_context.translate (x ، y) ؛
// تغيير خط البناء
var yellowgrad = _context.createlineargradient (30،0،0،30) ؛
Yellowgrad.AddColorStop (0 ، '#fccb02') ؛
Yellowgrad.AddColorStop (0.5 ، '#fbf14d') ؛
Yellowgrad.AddColorStop (1 ، '#ffcb02') ؛
var bluadgrad = _context.createlineargradient (30،0،0،30) ؛
bluadgrad.addcolorstop (0 ، '#2A459C') ؛
bluadgrad.addcolorstop (0.5 ، '#0e7adc') ؛
bluadgrad.addcolorstop (1 ، '#2a459e') ؛
var redgrad = _context.createlineargradient (30،0،0،30) ؛ // تدوير عن طريق الدوران
redgrad.addcolorstop (0 ، '#d0372f') ؛
redgrad.addcolorstop (0.5 ، '#e0675e') ؛
redgrad.addcolorstop (1 ، '#ce392d') ؛
var greengrady = _context.createlineargradient (30،0،0،30) ؛ // تدوير عن طريق الدوران
greengrad.addcolorstop (0 ، '#059700') ؛
greengrad.addcolorstop (0.5 ، '#02e003') ؛
greengrad.addcolorstop (1 ، '#019a02') ؛
// ارسم زاوية اثنين من الأقواس
DrawCake (_context ، 0 ، Yellowgrad ، nradius) ؛
DrawCake (_context ، Math.pi/2 ، Bluegrad ، nradius) ؛
DrawCake (_context ، Math.pi ، Redgrad ، nradius) ؛
DrawCake (_context ، 3*Math.pi/2 ، Greengrad ، nradius) ؛
// لون الدائرة الداخلية
var lingrad = _context.createlineargradient (-30 ، -30،30،30) ؛
lingrad.addcolorstop (0 ، '#4672df') ؛
lingrad.addcolorstop (0.2 ، '#6188e5') ؛
lingrad.addcolorstop (0.5 ، '#98b1ef') ؛
lingrad.addcolorstop (0.8 ، '#b1c3f2') ؛
lingrad.addcolorstop (1 ، '#eaedfc') ؛
_context.save () ؛
_context.beginpath () ؛ // الدائرة الداخلية
_context.fillStyle = lingrad ؛
_context.arc (0،0 ، nradius-10،0 ، math.pi*2 ، true) ؛
_context.fill () ؛
_context.closepath () ؛
_context.restore () ؛
// رسم مثلث
var trianglerad = _context.createlineargradient (-6 ، -10 ، -6،10) ؛
trianglerad.addcolorstop (0 ، '#99d4ea') ؛
trianglerad.addcolorstop (0.2 ، '#5e8fdd') ؛
trianglerad.addcolorstop (0.5 ، '#0f17a1') ؛
trianglerad.addcolorstop (0.8 ، '#4C65CC') ؛
trianglerad.addcolorstop (1 ، '#7299e5') ؛
_context.beginpath () ؛
_context.fillStyle = Trianglerad ؛
_context.moveto (12،0) ؛
_context.lineto (-6،10) ؛
_context.lineto (-6 ، -10) ؛
_context.fill () ؛
_context.restore () ؛
}
// ارسم مروحة
دالة drawcake (_context ، _nrotateangle ، _fillcolor ، _nradius) {
_context.save () ؛
_context.beginpath () ؛
_context.fillStyle = _fillColor ؛
_context.rotate (_nrotateAngle) ؛
_context.moveto (_nradius-10،0) ؛
_context.lineto (_nradius ، 0) ؛ // ارسم خطًا إلى اليمين
_context.arc (0،0 ، _nradius ، 0 ، math.pi/2 ، false) ؛
_context.lineto (0 ، _nradius-10) ؛ // ارسم واحدة لأعلى
_context.arc (0،0 ، _nradius-10 ، math.pi/2،0 ، true) ؛ // ارسم القوس الداخلي لعكس اتجاه عقارب الساعة
_context.fill () ؛
_context.closepath () ؛
_context.restore () ؛
}
</script>
</body>
</html>