zoukankan      html  css  js  c++  java
  • canvas绘制曲线

    canvas绘制曲线

    1. 方法

      quadraticCurveTo(cp1x, cp1y, x, y)              只有一个控制点的贝塞尔曲线(其实就是控制点分别与起始点和结束点连线的公切线)
      bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)     有两个控制点的贝塞尔曲线
      
    2. quadraticCurveTo

      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      
      ctx.beginPath();
      ctx.moveTo(75, 25);
      ctx.quadraticCurveTo(25, 25, 25, 75);
      ctx.quadraticCurveTo(25, 125, 75, 125);
      ctx.quadraticCurveTo(125, 125, 125, 75);
      ctx.quadraticCurveTo(25, 125, 75, 25);
      ctx.stroke();
      
    3. bezierCurveTo

      ctx.beginPath();
      ctx.moveTo(75, 25);
      ctx.bezierCurveTo(75, 75, 25, 75, 25, 25);
      ctx.stroke();
      
  • 相关阅读:
    2014第5周一
    2014第4周日
    2014第4周六
    underscore.js
    2014第4周四
    2014第4周三
    2014年第2周二
    POj 3126 Prime Path
    Oracle EBS 入门
    HDU1698_Just a Hook(线段树/成段更新)
  • 原文地址:https://www.cnblogs.com/ye-hcj/p/10357213.html
Copyright © 2011-2022 走看看