在上一章,我们制作了基本动画以及逐步了解了让物件移动的方法。在这一部分,我们将会对运动有更深的了解并学会添加一些符合物理的运动以让我们的动画更加高级。
绘制小球
我们将会画一个小球用于动画学习,所以首先在画布上画一个球。下面的代码帮助我们建立画布。
<c...
4年前 (2020-02-18) 1084℃
0喜欢
由于我们是用 JavaScript 去操控 <canvas> 对象,这样要实现一些交互动画也是相当容易的。在本章中,我们将看看如何做一些基本的动画。
可能最大的限制就是图像一旦绘制出来,它就是一直保持那样了。如果需要移动它,我们不得不对所有...
4年前 (2020-02-17) 1185℃
0喜欢
在之前的例子里面,我们总是将一个图形画在另一个之上,对于其他更多的情况,仅仅这样是远远不够的。比如,对合成的图形来说,绘制顺序会有限制。不过,我们可以利用 globalCompositeOperation 属性来改变这种状况。此外, clip属性允...
4年前 (2020-02-17) 1176℃
0喜欢
在本教程前面的部分中,我们已经了解了Canvas网格和坐标空间。到目前为止,我们只是根据我们的需要使用默认的网格,改变整个画布的大小。变形是一种更强大的方法,可以将原点移动到另一点、对网格进行旋转和缩放。
状态的保存和恢复 Saving and restoring sta...
4年前 (2020-02-17) 1193℃
0喜欢
canvas更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等。浏览器支持的任意格式的外部图片都可以使用,比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。
引...
4年前 (2020-02-17) 1283℃
0喜欢
在前一个章节中看过 应用样式和颜色 之后, 我们现在来看一下如何在canvas中绘制文本
绘制文本
canvas 提供了两种方法来渲染文本:fillText(text, x, y [, maxWidth])在指定的(x,y)位置填充指定的文本,绘...
4年前 (2020-02-17) 1074℃
0喜欢
在绘制图形的章节里,我只用到默认的线条和填充样式。而在这一章里,我们将会探讨 canvas 全部的可选项,来绘制出更加吸引人的内容。
色彩 Colors
到目前为止,我们只看到过绘制内容的方法。如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle...
4年前 (2020-02-17) 612℃
0喜欢
在绘制图形的章节里,我只用到默认的线条和填充样式。而在这一章里,我们将会探讨 canvas 全部的可选项,来绘制出更加吸引人的内容。
色彩 Colors
到目前为止,我们只看到过绘制内容的方法。如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle...
4年前 (2020-02-16) 706℃
0喜欢
既然我们已经设置了 canvas 环境,我们可以深入了解如何在 canvas 上绘制。到本文的最后,你将学会如何绘制矩形,三角形,直线,圆弧和曲线,变得熟悉这些基本的形状。绘制物体到Canvas前,需掌握路径,我们看看到底怎么做。
栅格
在我们开始...
4年前 (2020-02-16) 473℃
0喜欢
让我们通过了解 <canvas> HTML 元素本身开始本教程。在本页结束时,你会了解到如何去设置一个 canvas 2D 上下文以及如何在你的浏览器上创建第一个例子。
<canvas> 元素
...
4年前 (2020-02-16) 717℃
0喜欢