canvas实例 扫地僧 北邮 web 前端课程之 Canvas 画布(7)

点的子路径，并加入到绘图上下文。有点拗口，其一般可以看为，假如最后一个子路径，我们命名为 spN，假设 spN 有多个点，则用直线连接 spN 的后一个点和第一个点，然后关闭此路径和 moveTo 到第一个点。

(2) 绘制函数调用格式：

context . stroke()

context . fill()

context . clip()

方法概述：

stroke 方法使用 lineWidth，lineCap，lineJoin，以及 strokeStyle 对所有的子路径进行填充。

fill 方法使用 fillStyle 方式填充子路径， 未闭合的子路径在填充式按照闭合方式填充，但并不影响实际的子路径集合。

clip 方法使用计算所有的子路径而建立新的剪切区域，未闭合的子路径

在填充式按照闭合方式填充，但并不影响实际的子路径集合，新的剪切区域将替换当前的剪切区域。

对于剪切，也许需要一个小节才能说明白，这里我摘抄来自 mozilla 的教程来阐述剪切的应用。

(3) 剪切(clip)

裁切路径和普通的 canvas 图形差不多，不同的是它的作用是遮罩，用来隐藏没有遮罩的部分。如下图所示。红边五角星就是裁切路径，所有在路径以外的部分都不会在 canvas 上绘制出来。

如果和上面介绍的 globalCompositeOperation 属性作一比较，它可以实现与 source-in 和 source-atop 差不多的效果。最重要的区别是裁切路径不会在 canvas 上绘制东西，而且它永远不受新图形的影响。这些特性使得它在特定区域里绘制图形时相当好用。

我们用 clip 方法来创建一个新的裁切路径。默认情况下，canvas 有一个与它自身一样大的裁切路径（也就是没有裁切效果） 。

下面展示一个随机星星的例子，并且我们会用 clip 来限制星星出现的区域。

首先，我画了一个与 canvas 一样大小的黑色方形作为背景，然后移动原点至中心点。然后用 clip 方法创建一个弧形的裁切路径。裁切路径也属于 canvas 状态的一部分，可以被保存起来。如果我们在创建新裁切路径时想保留原来的裁切路径，我们需要做的就是保存一下 canvas 的状态。

裁切路径创建之后所有出现在它里面的东西才会画出来。在画线性渐变

时这个就更加明显了。 然后在随机位置绘制 50 大小不一 （经过缩放） 的，

当然也只有在裁切路径里面的星星才会绘制出来。

代码如下：

function draw() {

var ctx =

document.getElementById('canvas').getContext('2d');

ctx.fillRect(0,0,150,150);

ctx.translate(75,75);

// 规划一个圆形的规则

ctx.beginPath();

ctx.arc(0,0,60,0,Math.PI*2,true);

ctx.clip();

// 开始画背景

var lingrad =

ctx.createLinearGradient(0,-75,0,75);

lingrad.addColorStop(0, '#232256');

lingrad.addColorStop(1, '#143778');

ctx.fillStyle = lingrad;

ctx.fillRect(-75,-75,150,150);

// 开始画星星

for (var j=1;j<50;j++){

ctx.save();

ctx.fillStyle = '#fff';

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-64819-7.html