IT源码网

怎样绘制三次贝塞尔曲线

qq123 2021年03月09日 编程语言 400 0

需要使用: ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

function draw(){ 
    var canvas = document.getElementById('canv'); 
    if (!canvas.getContext) return; 
    var ctx = canvas.getContext("2d"); 
    ctx.beginPath(); 
    ctx.moveTo(40, 200); //起始点 
    var cp1x = 20, cp1y = 100;  //控制点1 
    var cp2x = 100, cp2y = 120;  //控制点2 
    var x = 200, y = 200; // 结束点 
    //绘制三次贝塞尔曲线 
    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); 
    ctx.stroke(); 
  
    // 显示控制点 
    ctx.beginPath(); 
    ctx.rect(40, 200, 10, 10); 
    ctx.rect(cp1x, cp1y, 10, 10); 
    ctx.rect(cp2x, cp2y, 10, 10); 
    ctx.rect(x, y, 10, 10); 
    ctx.fill(); 
  
} 
draw();

 

评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!