javascript - that - canvas html5 شرح



قطع شكل غير منتظم على الصورة (1)

أنا أحاول أن تقطع صورة إلى شكل معين باستخدام مقطع قماش () الأسلوب.

وقد اتبعت الخطوات التالية للقيام بذلك:

  1. رسم مستطيل.
  2. رسم الدوائر شبه على كل جانب. تبرز الدوائر اليمنى والسفلية من الخارج إلى الخارج، بينما تكون الدوائر شبه الأيسر والأعلى في الداخل.

يتم توفير مقتطف الشفرة أدناه:

var canvasNode = this.hasNode();
var ctx = canvasNode && canvasNode.getContext('2d');

var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0, 512, 384);
};

image.src = "images/image.png";
var startX = 200;
var startY = 0;

var rectWidth = 150;
var rectHeight = 150;
var radius = 30;

//Main Rect
ctx.rect(startX, startY, rectWidth, rectHeight);

//Right arc
ctx.moveTo(startX+=rectWidth, startY+=(rectHeight/2));
ctx.arc(startX, startY, radius, 3 * Math.PI / 2, Math.PI / 2, false);

//Left arc
ctx.moveTo(startX-=(rectWidth / 2), startY+=(rectHeight / 2));
ctx.arc(startX, startY, radius, 0, Math.PI, true);

ctx.moveTo(startX-=(rectWidth / 2), startY-=(rectWidth / 2));
ctx.arc(startX, startY, radius, 3 * Math.PI / 2, Math.PI / 2, false);

ctx.clip();

الصورة التي أستخدمها بحجم 800 × 600 (ينغ). الرجاء مساعدتي على فهم ما أفعله هنا.


أولا، لماذا تستخدم clip ؟ أنت حاليا مجرد رسم سيميسيركليس، الذي يعمل من دون clip .

ثانيا، كنت إنشاء مسارات وقطعة، ولكن كنت أبدا السكتة الدماغية الطريق. ونتيجة لذلك، لن ترى أي شيء على الشاشة.

إذا كنت مجرد السكتة الدماغية بدلا من مقطع، فإنه يعمل جزئيا بالنسبة لي: http://jsfiddle.net/r6yAN/ . لم تقم بإدراج نصف الدائرة العلوي على الرغم من.

تحرير: يبدو أنك لا تستخدم أفضل طريقة للتقطيع. يمكنك رسم مستطيل، ولكن هذا يشمل أيضا خط في نصف دائرة. سوف تكون أفضل حالا إذا كنت رسم كل خط / قوس نفسك مثل هذا: http://jsfiddle.net/CH6qB/6/ .

والفكرة الرئيسية هي الانتقال من نقطة إلى نقطة كما في هذه الصورة:

لذا ابدأ أولا في (startX, startY) ، ثم سطر إلى (startX + lineWidth, startY) ، ثم قوس في (startX + rectWidth / 2, startY) من pi إلى 0 (عكس اتجاه عقارب الساعة)، وما إلى ذلك.

إذا كنت ترغب في السكتة الدماغية المسار وكذلك بعد رسم الصورة، فمن فكرة جيدة أن أونكليب مرة أخرى. وإلا، فإن السكتة الدماغية لن تكون ذات نوعية كبيرة.

var canvasNode = document.getElementById('cv');
var ctx = canvasNode && canvasNode.getContext('2d');

var image = new Image();
image.onload = function() {
    // draw the image, region has been clipped
    ctx.drawImage(image, startX, startY);

    // restore so that a stroke is not affected by clip
    // (restore removes the clipping because we saved the path without clip below)
    ctx.restore();
    ctx.stroke();
};

image.src = "http://www.lorempixum.com/200/200/";

var startX = 200;
var startY = 0;

var rectWidth = 150;
var rectHeight = 150;
var radius = 30;

var lineWidth  = rectWidth  / 2 - radius;
var lineHeight = rectHeight / 2 - radius;

// typing pi is easier than Math.PI each time
var pi = Math.PI;

ctx.moveTo(startX, startY);

ctx.lineTo(startX + lineWidth, startY);
ctx.arc(startX + rectWidth / 2, startY,
        radius,
        pi, 0, true);
ctx.lineTo(startX + rectWidth, startY);

ctx.lineTo(startX + rectWidth, startY + lineHeight);
ctx.arc(startX + rectWidth, startY + rectHeight / 2,
        radius,
        -pi / 2, pi / 2, false);
ctx.lineTo(startX + rectWidth, startY + rectHeight);

ctx.lineTo(startX + rectWidth - lineWidth, startY + rectHeight);
ctx.arc(startX + rectWidth / 2, startY + rectHeight,
        radius,
        0, pi, false);
ctx.lineTo(startX, startY + rectHeight);

ctx.lineTo(startX, startY + rectHeight - lineHeight);
ctx.arc(startX, startY + rectHeight / 2,
        radius,
        pi/2, pi*3/2, true);
ctx.lineTo(startX, startY);

ctx.save(); // Save the current state without clip

ctx.clip();




html5-canvas