Board logo

标题: 使用 HTML5 canvas 进行 Web 绘图（2） [打印本页]
作者: look_w    时间: 2018-9-19 20:32     标题: 使用 HTML5 canvas 进行 Web 绘图（2）

绘制路径在开始动手绘制路径之前，首先需要明确的是：矩形绘制 API 是一种即时性的 API，他会在相应的绘图函数执行完毕之后，将图形即时的渲染在画面上。然而路径绘制 API 并非如此，完整的路径绘制过程大致可以分为如下两个阶段：
在每个 canvas 实例对象中都拥有一个 path 对象，创建自定义图形的过程就是不断对 path 对象操作的过程。每当开始一次新的图形绘制任务，都需要先使用 beginPath() 方法来重置 path 对象至初始状态，进而通过一系列对 moveTo/lineTo 等画线方法的调用，绘制期望的路径，其中 moveTo(x, y) 方法设置绘图起始坐标，而 lineTo(x,y) 等画线方法可以从当前起点绘制直线，圆弧以及曲线到目标位置。最后一步，也是可选的步骤，是调用 closePath() 方法将自定义图形进行闭合，该方法将自动创建一条从当前坐标到起始坐标的直线。
定义完路径的轮廓，此时 canvas 画面中没有显示任何路径，开发人员还可以对路径进行修改。一旦确定完成，则需要继续调用 stroke()/fill() 函数来完成将路径渲染到画面的最后一步。路径的轮廓颜色和填充颜色由 strokeStyle 和 fillStyle 属性决定。
清单 2 绘制一个图 2 所示半圆弧，并通过 closePath() 方法完成图形的闭合。
图 2. 清单 2 对应的示例图形清单 2. 绘制 canvas 路径
1
2
3
4
5
6
7
8
9
10
11
12
13
function draw(){
var canvas = document.getElementById('canvas');
    if (canvas.getContext){
        var ctx = canvas.getContext('2d');
ctx.fillStyle = '#00f';
        ctx.strokeStyle = '#f00';
        ctx.beginPath();
ctx.arc(75,75,30,0,Math.PI, false);  // 绘制一条半圆弧线
ctx.closePath();    // 自动绘制一条直线来关闭弧线。若不调用此方法，将仅仅显示一条半圆弧
ctx.fill();      // 可以尝试注释掉 fill 或者 stroke 函数，观察图形的变化
ctx.stroke();  
    }
}




二维变形Canvas 绘图中另一个重要的概念是 绘画状态（Drawing State），绘画状态反映了渲染上下文当前的瞬时状态，开发人员可以通过对绘画状态的保存 / 恢复操作而快速的回到之前使用的各种属性和变形操作。绘画状态主要由以下三个部分构成：
需要指出的是，当前路径对象以及当前的位图都不包含在绘画状态之中，路径是持续性的对象，如前文所讲，只有通过 beginPath() 操作才会进行重置，而位图则是 canvas 的属性，并非属于渲染上下文的。
开发人员可以使用 save 和 restore 两种方法来保存和恢复 canvas 状态，每调用 save 方法，都会将当前状态压入堆栈中，而相应的 restore 方法则会从堆栈中弹出一个状态，并将当前画面恢复至该状态。绘画状态在 canvas 图形变形操作中应用极为广泛，也非常重要，因为调用一个 restore 方法远比手动恢复先前状态要简单许多，因而，一个较好的习惯是在做变形操作之前先保存 canvas 状态。
二维绘图的常用变形操作在 canvas 中都可到了很好的支持，包括平移（Translate），旋转（Rotate），伸缩（Scale）等等。由于所有的变形操作都基于变形矩阵，因而开发人员始终需要记住一点的就是，一旦没有使用 save/restore 操作保持住原来的绘图状态，那么后续的绘图操作，都会在当前所应用的变形状态下完成。清单 3 使用平移和旋转方法绘制了如下所示画面。
图 3. 清单 3 所示示例图形清单 3. 使用平移 / 旋转变形方法绘制复杂位图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function drawPointCircle(){  
var canvas = document.getElementById('canvas');  
    if (canvas.getContext){
        var ctx = canvas.getContext('2d');  
ctx.translate(150,150);   // 将 canvas 的原点从 (0,0) 平移至（150,150）
for (i=1;i<=2;i++){        // 绘制内外 2 层
if ((i % 2) == 1) {ctx.fillStyle = '#00f';}
else{ ctx.fillStyle = '#f00'; }
ctx.save();             // 保持开始绘制每一层时的状态一致
for (j=0;j<=i*6;j++){   // 每层生成点的数量
ctx.rotate(Math.PI/(3*i));  // 绕当前原点将坐标系顺时针旋转 Math.Pi/(3*i) 度
                ctx.beginPath();
                ctx.arc(0,20*i,5,0,Math.PI*2,true);
ctx.fill();         // 使用 fillType 值填充每个点
}
ctx.restore();   
        }
    }
}





欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0