SORU
10 AĞUSTOS 2009, PAZARTESİ


Nasıl HTML Tuval üzerine yuvarlak bir Dikdörtgen çizin.

Sadece dikdörtgen ama yuvarlak köşe doldurmak, bunu nasıl yapabilirim? yok yok buldum

CEVAP
30 Temmuz 2010, Cuma


Aynı şeyi yapmam gerekiyordu ve bunu yapmak için bir yöntem yarattı.

// Now you can just call
var ctx = document.getElementById("rounded-rect").getContext("2d");
// Draw using default border radius, 
// stroke it but no fill (function's default values)
roundRect(ctx, 5, 5, 50, 50);
// To change the color on the rectangle, just manipulate the context
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.fillStyle = "rgba(255, 255, 0, .5)";
roundRect(ctx, 100, 5, 100, 100, 20, true);
// Manipulate it again
ctx.strokeStyle = "#0f0";
ctx.fillStyle = "#ddd";
// Different radii for each corner, others default to 0
roundRect(ctx, 300, 5, 200, 100, {
  tl: 50,
  br: 25
}, true);

/**
 * Draws a rounded rectangle using the current state of the canvas.
 * If you omit the last three params, it will draw a rectangle
 * outline with a 5 pixel border radius
 * @param {CanvasRenderingContext2D} ctx
 * @param {Number} x The top left x coordinate
 * @param {Number} y The top left y coordinate
 * @param {Number} width The width of the rectangle
 * @param {Number} height The height of the rectangle
 * @param {Number} [radius = 5] The corner radius; It can also be an object 
 *                 to specify different radii for corners
 * @param {Number} [radius.tl = 0] Top left
 * @param {Number} [radius.tr = 0] Top right
 * @param {Number} [radius.br = 0] Bottom right
 * @param {Number} [radius.bl = 0] Bottom left
 * @param {Boolean} [fill = false] Whether to fill the rectangle.
 * @param {Boolean} [stroke = true] Whether to stroke the rectangle.
 */
function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
  if (typeof stroke == 'undefined') {
    stroke = true;
  }
  if (typeof radius === 'undefined') {
    radius = 5;
  }
  if (typeof radius === 'number') {
    radius = {tl: radius, tr: radius, br: radius, bl: radius};
  } else {
    var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0};
    for (var side in defaultRadius) {
      radius[side] = radius[side] || defaultRadius[side];
    }
  }
  ctx.beginPath();
  ctx.moveTo(x   radius.tl, y);
  ctx.lineTo(x   width - radius.tr, y);
  ctx.quadraticCurveTo(x   width, y, x   width, y   radius.tr);
  ctx.lineTo(x   width, y   height - radius.br);
  ctx.quadraticCurveTo(x   width, y   height, x   width - radius.br, y   height);
  ctx.lineTo(x   radius.bl, y   height);
  ctx.quadraticCurveTo(x, y   height, x, y   height - radius.bl);
  ctx.lineTo(x, y   radius.tl);
  ctx.quadraticCurveTo(x, y, x   radius.tl, y);
  ctx.closePath();
  if (fill) {
    ctx.fill();
  }
  if (stroke) {
    ctx.stroke();
  }

}
<canvas id="rounded-rect" width="600" height="600">
  <!-- Insert fallback content here -->
</canvas>

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • CommonArtisan

    CommonArtisa

    7 Temmuz 2012
  • DRDAnimation

    DRDAnimation

    28 EYLÜL 2012
  • Maya Learning Channel

    Maya Learnin

    23 HAZİRAN 2010