Question

我正在尝试剪切并在canvas div中显示一个非常大的图像。

使用基本计算和drawImage我设法将图像剪切到我想要的像素周围并显示剪切的图像。

An example is here on JSFiddle (displaying image arround eye of the person)

我想在像素周围的图像上添加一个弧（我在sx, sy示例中使用的drawImage像素），我该如何调整坐标？

var canvas = document.getElementById('test-canvas');
    canvas.width = 500;
    canvas.height = 285;
    var context = canvas.getContext('2d');

var imageObj = new Image();

imageObj.onload = function () {
    //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    context.drawImage(imageObj, 1324 - 250, 1228 - 142.5, 500, 285, 0, 0, 500, 285);
};


imageObj.src = "http://upload.wikimedia.org/wikipedia/en/b/b3/Edvard_Munch_-_Self-Portrait_-_Google_Art_Project.jpg";

Answer 1

弧是路径的一部分，可以是填充或描边。为了获得所需的结果，您需要移动到圆圈上的某个点*，创建圆弧，然后使用stroke()（fiddle）：

function strokeCircle(ctx, midx, midy, radius){
    ctx.moveTo(midx + radius, midy);
    ctx.arc(midx, midy, radius, 0, 2 * Math.PI, false);
    ctx.stroke();
}

imageObj.onload = function () {
    context.drawImage(imageObj, 1324 - 250, 1228 - 142.5, 500, 285, 0, 0, 500, 285);
    strokeCircle(context, 250, 142.5, 30);
};

_{*正确的坐标取决于用于圆的极坐标。如果从0到Math.PI绘制，则需要从最右边开始。}

在画布内的图像上绘制圆弧

1 个答案: