<canvas>元素是众多广泛使用的网络2D图像渲染标准之一。它被广泛用于游戏及复杂的图像可视化中。然而,随着网站和应用将canvas画布推至极限,性能开始成为问题。此文目标是给使用canvas画布元素的优化带来建议,去保证你的网站或者应用表现卓越。
性能贴士...
Zero、J
5年前 (2020-02-18) 1318℃
0喜欢
<canvas> 标签只是一个位图,它并不提供任何已经绘制在上面的对象的信息。 canvas的内容不能像语义化的HTML一样暴露给一些协助工具。一般来说,你应该避免在交互型的网站或者App上使用canvas。接下来的内容能帮助你让canvas更加容易交互。...
Zero、J
5年前 (2020-02-18) 1621℃
0喜欢
到目前为止,我们尚未深入了解Canvas画布真实像素的原理,事实上,你可以直接通过ImageData对象操纵像素数据,直接读取或将数据数组写入该对象中。稍后我们也将深入了解如何控制图像使其平滑(反锯齿)以及如何从Canvas画布中保存图像。
ImageData 对象
...
Zero、J
5年前 (2020-02-18) 1299℃
0喜欢
在上一章,我们制作了基本动画以及逐步了解了让物件移动的方法。在这一部分,我们将会对运动有更深的了解并学会添加一些符合物理的运动以让我们的动画更加高级。
绘制小球
我们将会画一个小球用于动画学习,所以首先在画布上画一个球。下面的代码帮助我们建立画布。
<c...
Zero、J
5年前 (2020-02-18) 1184℃
0喜欢
由于我们是用 JavaScript 去操控 <canvas> 对象,这样要实现一些交互动画也是相当容易的。在本章中,我们将看看如何做一些基本的动画。
可能最大的限制就是图像一旦绘制出来,它就是一直保持那样了。如果需要移动它,我们不得不对所有...
Zero、J
5年前 (2020-02-17) 1296℃
0喜欢
在之前的例子里面,我们总是将一个图形画在另一个之上,对于其他更多的情况,仅仅这样是远远不够的。比如,对合成的图形来说,绘制顺序会有限制。不过,我们可以利用 globalCompositeOperation 属性来改变这种状况。此外, clip属性允...
Zero、J
5年前 (2020-02-17) 1264℃
0喜欢
在本教程前面的部分中,我们已经了解了Canvas网格和坐标空间。到目前为止,我们只是根据我们的需要使用默认的网格,改变整个画布的大小。变形是一种更强大的方法,可以将原点移动到另一点、对网格进行旋转和缩放。
状态的保存和恢复 Saving and restoring sta...
Zero、J
5年前 (2020-02-17) 1285℃
0喜欢
canvas更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等。浏览器支持的任意格式的外部图片都可以使用,比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。
引...
Zero、J
5年前 (2020-02-17) 1379℃
0喜欢
在前一个章节中看过 应用样式和颜色 之后, 我们现在来看一下如何在canvas中绘制文本
绘制文本
canvas 提供了两种方法来渲染文本:fillText(text, x, y [, maxWidth])在指定的(x,y)位置填充指定的文本,绘...
Zero、J
5年前 (2020-02-17) 1163℃
0喜欢
在绘制图形的章节里,我只用到默认的线条和填充样式。而在这一章里,我们将会探讨 canvas 全部的可选项,来绘制出更加吸引人的内容。
色彩 Colors
到目前为止,我们只看到过绘制内容的方法。如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle...
Zero、J
5年前 (2020-02-17) 689℃
0喜欢