Σχεδιασμός κύκλων σε html..

ms.natasa · 24 Αυγούστου 2013

καλήμερα!

θέλω να φτιάξω το εξής..

θέλω μέσα στη σελίδα μου, να εμφανίσω καμιά 20αριά μικρούς κύκλους και στο κέντρο του παραθύρου έναν μεγαλύτερο.. οι μικροί κύκλοι θα είναι αριθμιμένοι (1,2,3...20) ενώ ο μεγάλος κύκλος θα έχει ενα τίτλο πχ "Κύκλος 1"

Πώς μπορώ να το κάνω αυτό? Ενας τρόπος είναι να φτιάξω 2 κύκλους σε φωτογραφίες (το μικρό και το μεγάλο) και μετά με κάποιο τρόπο να τα βάλω στην σελίδα..

Μετά βρήκα και αυτό Site: http://www.w3schools.com/svg/">SVG αλλά δεν είμαι κ πολύ σίγουρη..

Ευχαριστώ!

sougiasdj · 24 Αυγούστου 2013

Καλημέρα.

Γιατί να μην χρησιμοποιήσεις html5;

http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();
    </script>
  </body>
</html>

Ενα ακόμη παράδειγμα που μπορείς να το πάρεις και να αρχίζεις να παίζεις

$("#circles_container").on("click", "#circles_canvas", function(event) {
        var canvas = document.getElementById('circles_canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            var w = 16;
            var x = event.pageX;
            var y = Math.floor(event.pageY-$(this).offset().top);
            ctx.beginPath();
            ctx.fillStyle = "rgb(200,0,0)";
            ctx.arc(x, y, w/2, 0, 2 * Math.PI, false);
            ctx.fill();

            ctx = canvas.getContext("2d");
            ctx.font = '8pt Calibri';
            ctx.fillStyle = 'white';
            ctx.textAlign = 'center';
            ctx.fillText('0', x, y+3);
        }
    });

Αν είδες είναι on click action αρα μπορείς να το πάρεις και να το παραμετροποιήσεις όπου θές.

ms.natasa · 24 Αυγούστου 2013

Σ'ευχαριστώ! ερώτηση...
Η HTML 5 είναι συμβατή σε όλους τους broswers?

EDIT

Σ'ευχαριστώ!!

migf1 · 25 Αυγούστου 2013

Σ'ευχαριστώ! ερώτηση...

Η HTML 5 είναι συμβατή σε όλους τους broswers?

...

Στους μοντέρνους ναι.

Θα μπορούσες επίσης να το κάνεις και με σκέτη HTML και CSS3 (π.χ.: http://davidwalsh.name/css-circles ... κώδικας: http://jsfiddle.net/DsW9h/2/) και για συμβατότητα με IE8 και πίσω να χρησιμοποιήσεις CSS3 PIE.

Με λίγη παραπάνω "ταλαιπωρία" μπορείς να τους κάνεις και fluid τους κύκλους σου (π.χ.: http://jsfiddle.net/ansciath/RtbXD/1/ ... κι εδώ η εξήγηση: http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio).

Μια άλλη εναλλακτική για cross-browser υλοποίηση είναι να χρησιμοποιήσεις κάποια js βιβλιοθήκη, όπως η πολύ δημοφιλής RaphaelJS.

παπι · 25 Αυγούστου 2013

http://jsfiddle.net/papi/M9cnb/

Xvipes · 30 Αυγούστου 2013

border-radius: 50%;

position: absolute;

αυτό μόνο έφτανε πιστεύω

Σύνδεση

Σχεδιασμός κύκλων σε html..

Προτεινόμενες αναρτήσεις

ms.natasa

sougiasdj

ms.natasa

migf1

παπι

Xvipes

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση