Canvas 入门2 圆、矩形、路径、贝塞尔曲线、Path2D-CFANZ编程社区

模板骨架

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

画圆

arc(x,y,r,start,stop)

画布的左上角坐标为0,0

x：圆心在x轴上的坐标
y：圆心在y轴上的坐标
r：半径长度
start：起始角度，以弧度表示，圆心平行的右端为0度
stop：结束角度，以弧度表示

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(250,250,250,0,Math.PI);
ctx.stroke();
</script>

画矩形

canvas只支持一种原生的图形绘制：矩形。所有其它的图形的绘制都至少需要生成一条路径。
矩形的方法：

方法	描述
rect()	创建矩形
fillRect(x, y, width, height)	绘制“被填充”的矩形
strokeRect(x, y, width, height)	绘制矩形（无填充）
clearRect(x, y, width, height)	在给定的矩形内清除指定的像素

function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }

路径

图形的基本元素是路径，步骤是：

创建路径起点
画图
把路径封闭
一旦路径生成，就能通过描边或填充路径区域来渲染图形。

路径的方法：

方法	描述
fill()	填充当前绘图（路径）
stroke()	绘制已定义的路径
beginPath()	起始一条路径，或重置当前路径
moveTo()	把路径移动到画布中的指定点，不创建线条
closePath()	创建从当前点回到起始点的路径
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip()	从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()	创建二次贝塞尔曲线
bezierCurveTo()	创建三次方贝塞尔曲线
arc()	创建弧/曲线（用于创建圆形或部分圆）
arcTo()	创建两切线之间的弧/曲线
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false

注意：
1. 当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论最后的是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。
2. 当调用fill()函数时，所有没有闭合的形状都会自动闭合，所以不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

示例
绘制一个三角形

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75,50);
    ctx.lineTo(100,75);
    ctx.lineTo(100,25);
    ctx.fill();
  }
}

移动笔触

moveTo(x, y)

贝塞尔曲线及三次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
示例中二次贝塞尔曲线有一个结束点（蓝色）以及一个控制点（红色）
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
示例中三次贝塞尔曲线有两个控制点，一个结束点

Canvas 入门2 圆、矩形、路径、贝塞尔曲线、Path2D_canvas

示例对话框气泡

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    // 二次贝尔赛曲线
    ctx.beginPath();
    ctx.moveTo(75,25);
    ctx.quadraticCurveTo(25,25,25,62.5);
    ctx.quadraticCurveTo(25,100,50,100);
    ctx.quadraticCurveTo(50,120,30,125);
    ctx.quadraticCurveTo(60,120,65,100);
    ctx.quadraticCurveTo(125,100,125,62.5);
    ctx.quadraticCurveTo(125,25,75,25);
    ctx.stroke();
  }
}

Canvas 入门2 圆、矩形、路径、贝塞尔曲线、Path2D_贝塞尔曲线_02

三次贝塞尔曲线

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    //三次贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(75,40);
    ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.bezierCurveTo(20,80,40,102,75,120);
    ctx.bezierCurveTo(110,102,130,80,130,62.5);
    ctx.bezierCurveTo(130,62.5,130,25,100,25);
    ctx.bezierCurveTo(85,25,75,37,75,40);
    ctx.fill();
  }
}

Canvas 入门2 圆、矩形、路径、贝塞尔曲线、Path2D_2d_03

一个复杂的示例
代码参照文章结尾的学习资源链接。

Canvas 入门2 圆、矩形、路径、贝塞尔曲线、Path2D_贝塞尔曲线_04

示例网络

<body>
    <canvas id="mycanvas" width="150" height="150"></canvas>

    <script type="text/javascript">

    var canvas = document.getElementById('mycanvas');
　　var ctx = canvas.getContext('2d');

    function drawGrid(context,color,stepx,stepy){
        ctx.strokeStyle=color;
        ctx.lineWidth = 0.5;

        for(var i =stepx+0.5;i<ctx.canvas.width;i+=stepx)
        {
            ctx.beginPath();
            ctx.moveTo(i,0);
            ctx.lineTo(i,ctx.canvas.height);
            ctx.stroke();
        }
        for(var i = stepy+0.5;i<ctx.canvas.height;i+=stepy){
            ctx.beginPath();
            ctx.moveTo(0,i);
            ctx.lineTo(ctx.canvas.width,i);
            ctx.stroke();
        }
    }
    drawGrid(ctx,'lightgray',10,10);
　
    </script>
  </body>

Path2D对象

Path2D 类提供一个表示任意几何形状路径的简单而又灵活的形状。

Path2D() 会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）

new Path2D();     // 空的Path对象
new Path2D(path); // 克隆Path对象
new Path2D(d);    // 从SVG建立Path对象

所有的路径方法都可以在Path2D中使用。

示例

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);

    var circle = new Path2D();
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);

    ctx.stroke(rectangle);
    ctx.fill(circle);
  }
}

Canvas 入门2 圆、矩形、路径、贝塞尔曲线、Path2D_canvas_05

SVG paths

新的Path2D API有另一个强大的特点，就是使用SVG path data来初始化canvas上的路径。这将使你获取路径时可以以SVG或canvas的方式来重用它们。
示例：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
ctx.fill(p);

完整示例参照：
https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D#Using_SVG_paths
Canvas 入门2 圆、矩形、路径、贝塞尔曲线、Path2D_2d_06

学习资源：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

Canvas 入门2 圆、矩形、路径、贝塞尔曲线、Path2D