1

我正在为我的项目创建一种自定义方法,该方法将创建多边形。我有这个:

var c2 = document.getElementById('c').getContext('2d');
c2.fillStyle = '#f00';
c2.beginPath();
c2.moveTo(10, 20);
c2.lineTo(20, 10);
c2.lineTo(60, 10);
c2.lineTo(60, 30);
c2.lineTo(20, 30);
c2.lineTo(10, 20);
c2.closePath();
c2.fill();

现场演示: http: //jsfiddle.net/yd7Wv/4292/ 现在,我需要使用贝塞尔曲线,因为我需要圆角边缘 ,你能帮我处理贝塞尔曲线吗?最好的问候,丹尼尔

4

2 回答 2

3

要么使用bezierCurveTo已经实现的方法:

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); 

http://www.w3schools.com/tags/canvas_beziercurveto.asp

或者您可以编写自己的 bazier 曲线方法,如下所示,它具有更大的近似值:

coord = function (x,y) {
  if(!x) var x=0;
  if(!y) var y=0;
  return {x: x, y: y};
}

function B1(t) { return t*t*t }
function B2(t) { return 3*t*t*(1-t) }
function B3(t) { return 3*t*(1-t)*(1-t) }
function B4(t) { return (1-t)*(1-t)*(1-t) }

function getBezier(percent,C1,C2,C3,C4) {
  var pos = new coord();
  pos.x = C1.x*B1(percent) + C2.x*B2(percent) + C3.x*B3(percent) + C4.x*B4(percent);
  pos.y = C1.y*B1(percent) + C2.y*B2(percent) + C3.y*B3(percent) + C4.y*B4(percent);
  return pos;
}
于 2013-02-06T09:33:16.750 回答
1

您可以使用绘制贝塞尔曲线

canvas_context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

canvas_context.quadraticCurveTo(cpx, cpy, x, y); 

这些文档将为您提供帮助

  1. http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/
  2. http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
于 2013-02-06T09:22:21.620 回答