var rectA = new Path.Rectangle({

point: [300, 100],

size: [200, 150],

strokeColor: yellow,

strokeWidth: 10

});

var rectB = rectA.clone();

rectB.strokeColor = orange;

rectB.scale(0.8);

var rectC = rectA.clone();

rectC.strokeColor = black;

rectC.scale(1.2);

function onFrame(event) {

rectA.strokeColor.hue += 10 * event.delta;

rectA.rotate(2);

rectB.rotate(2);

rectC.rotate(2);

}

登录后复制

var aSquare = new Path.RegularPolygon(new Point(550, 200), 4, 100);

aSquare.fillColor = pink;

aSquare.fullySelected = true;

function onFrame(event) {

for (var i = 0; i

<p>在这里，我们首先使用 Path.RegularPolygon(center, Sides, radius) 构造函数创建一个正方形。 sides 参数确定多边形的边数。 radius 参数决定多边形的大小。我还将 completelySelected 属性设置为 true，以便您可以看到各个点。</p>

<p>在 onFrame 处理程序内，我使用 for 循环迭代所有段，并将它们的 x 坐标设置为等于基于其索引计算的值。在 Math.sin() 函数内使用 event.time 函数不会产生任何与极值相关的问题，因为 Math.sin() 的值不会产生任何与极值相关的问题。 sin() 函数将始终位于 -1 和 1 之间。</p>

<p>以下演示显示了我们的动画正方形，顺便说一下，它不再是正方形，这要归功于我们的 onFrame 处理程序中的代码。我建议您尝试为多边形构造函数以及 sin 函数的参数尝试不同的值，看看它们如何影响演示中的最终动画。

<iframe src="%E2%80%9Chttps://codepen.io/Shokeen/full/zqVKpM%E2%80%9D%E5%AE%BD%E5%BA%A6=%E2%80%9C850%E2%80%9D%E9%AB%98%E5%BA%A6=%E2%80%9C450%E2%80%9Dframeborder=%E2%80%9C0%E2%80%9D%E5%8A%A0%E8%BD%BD=%E2%80%9Clazy%E2%80%9D"></iframe></p><h2>图像基础知识</h2>

<p>Paper.js 中的图像称为栅格。您可以像任何其他项目一样变换和移动它们。要在项目中使用图像，您首先必须使用常用的 img 标签将其添加到网页的标记中，并为其指定 id。这个 id 随后被传递给 new Raster(id) 构造函数。</p>

<p>请记住，您正在使用的图像需要已加载，并且应托管在与您的项目相同的网站上。使用其他域上托管的图像将导致安全错误。在本教程中，我们将操作以下图像：</p>

<p><img src="https://img.php.cn/upload/article/000/465/014/169370310676905.jpg" alt="Paper.js入门指南：动画和图像"></p><p>要访问上图中各个像素的颜色，您可以使用 栅格。 getPixel(x, y) 函数，其中 x 和 y 是像素的坐标。下面的代码生成 7*7 像素的正方形，填充位于左上角的像素的颜色：</p>

<pre class="brush:javascript;toolbal:false;">var raster = new Raster(landscape);

var gridSize = 8;

var rectSize = 7;

raster.on(load, function() { 

raster.size = new Size(80, 40);

for (var y = 0; y

<p>加载栅格后，我们将其大小调整为 80*40。像素。在嵌套的 for 循环内，我们遍历该栅格的各个像素并创建 7*7 的正方形。增加栅格的大小会给我们带来更好的结果，但执行速度会更慢。这是最终结果，调整后的光栅在左上角可见：</p>

<iframe src="%E2%80%9Chttps://codepen.io/Shokeen/full/BKEvLR%E2%80%9D%E5%AE%BD%E5%BA%A6=%E2%80%9C850%E2%80%9D%E9%AB%98%E5%BA%A6=%E2%80%9C450%E2%80%9Dframeborder=%E2%80%9C0%E2%80%9D%E5%8A%A0%E8%BD%BD=%E2%80%9Clazy%E2%80%9D"></iframe><p>如果要隐藏调整大小后的栅格，可以将 raster.visible 属性设置为 false。您还可以操纵生成的方块的颜色。例如，要增加所有方块中的红色分量，您可以使用以下行：</p>

<pre class="brush:javascript;toolbal:false;">path.fillColor = color + new Color(0.4,0,0);

登录后复制

var aDodecagon = new Path.RegularPolygon(new Point(150, 180), 12, 30);

aDodecagon.fillColor = #CCAAFC;

var dodecRasterA = aDodecagon.rasterize();

dodecRasterA.position.x += 250;

var dodecRasterB = aDodecagon.rasterize(150);

dodecRasterB.position.x += 500;

aDodecagon.scale(3);

dodecRasterA.scale(3);

dodecRasterB.scale(3);

登录后复制