zoukankan      html  css  js  c++  java
  • 怎样绘制三次贝塞尔曲线

    需要使用: 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();

  • 相关阅读:
    递归的初步应用
    最大公约数与最小公倍数(低效)
    进制转换
    凸多边形的面积问题
    单词替换
    DNA排序
    字符串排序
    倒三角形
    韩信点兵
    oracle
  • 原文地址:https://www.cnblogs.com/aisowe/p/11571916.html
Copyright © 2011-2022 走看看