Question

我正在canvas创建圆柱体。实际上，直到我改变气缸的x y位置之前，气缸都很好。在左侧。我已经在两个函数中更改了translate的值现在我很困惑如何将我的底部移动到圆柱体的底部

现在我的圆筒圆圈向着方向移动。

我在这里更改了代码：

function drawCylinder(x, y, w, h, vRadius, fillStyle, strokeStyle) {
var w2 = w / 2;
var h2 = h / 2;
var ytop = -h2;
var cpYtop = -h2 - vRadius;
var ybottom = h2;
var cpYbottom = h2 + vRadius;
ctx.save();     
ctx.translate(40, 90);  
ctx.beginPath();    
ctx.moveTo(-w2, ytop);  
ctx.bezierCurveTo(-w2, cpYtop, w2, cpYtop, w2, ytop);
ctx.lineTo(w2, ybottom);
ctx.bezierCurveTo(w2, cpYbottom, -w2, cpYbottom, -w2, ybottom);
ctx.closePath();    
performDraw(fillStyle, strokeStyle);    
ctx.restore();  
}

和

function drawCylinderTop(x, y, w, h, vRadius, fillStyle, strokeStyle) {
var w2 = w / 2;
var h2 = h / 2;
var ytop = -h2;
var cpYtop = -h2 - vRadius;
var cpYLowtop = -h2 + vRadius;
ctx.save();
ctx.translate(40, 90);
ctx.beginPath();
ctx.moveTo(-w2, ytop);
ctx.bezierCurveTo(-w2, cpYtop, w2, cpYtop, w2, ytop);
ctx.bezierCurveTo(w2, cpYLowtop, -w2, cpYLowtop, -w2, ytop);
ctx.stroke();
ctx.lineWidth = 3;
performDraw(fillStyle, strokeStyle);
ctx.restore();
}

这是我以前的小提琴Link

这是我当前的小提琴Link

请帮帮我。

提前致谢

Answer 1

您只需更改cx和cy职位：

var cx = 40;
var cy = 70;

修正drawCylinderTop翻译：

ctx.translate(cx, cy);

http://jsfiddle.net/rAA8S/12/

将圆柱底部圆圈移到底部

1 个答案: