《JavaScript高效图形编程(修订版)》——6.6 画布导出器

6.6 画布导出器

画布完全由JavaScript控制,因此了解JavaScript是充分利用画布的前提。基于标记语言的方式无法来访问画布功能。不过倒是出现了画布导出器和转换器,它们可以生成绘制画布需要的JavaScript代码。这对JavaScript能力较弱的设计师来说是个极好的消息,对程序员来说也是如此,因为通过输入画布命令的方式手动创建精致的矢量艺术是枯燥且易出错的。

Adobe Flash CS5+
Adobe的Flash CS5+有一个画布导出器可以将部分Flash导出为JavaScript 画布源代码。这对想兼顾Flash和画布的开发者很有用。然而,由于该解决方案需要购买Flash创作工具,它对仅仅想开发画布的人来说可能不太划算。

Canvg

Canvg(如图6-1所示)是一个用画布绘制SVG数据的JavaScript库。不幸的是,其画布 JavaScript语句没有以任何形式保存下来,因此你必须始终包含Canvg库来绘制SVG。

SVG-to-Canvas

这个在线工具将静态的SVG转换为JavaScript的画布函数。它使用了一个修改版的Canvg库。

AI-Canvas

这个复杂的Adobe Illustrator插件(如图6-2所示)可以转换静态图片和动画。如果插件遇到不能转换的图像元素,它会把这些元素转换成位图。所有这些图像元素都被转化为可以进一步修改的画布JavaScript函数。

时间: 2024-10-26 16:38:53

《JavaScript高效图形编程(修订版)》——6.6 画布导出器的相关文章

《JavaScript高效图形编程(修订版)》——6.11 一个图形使用画布的WebSockets聊天应用

6.11 一个图形使用画布的WebSockets聊天应用 在下面的例子中我们将看到一个更实用的画布应用程序:一个伪3D聊天应用程序(如图6-15所示).这个例子将演示如何将画布和其他HTML5特性如WebSockets结合. 6.11.1 WebSockets优势 除画布外,另一个同样令人振奋(但可能比较不知名)的HTML5元素是WebSockets.虽然这本书是关于图形的,但还是值得讨论一下为什么WebSockets对现代Web应用程序意义重大,以及如何将它们与画布集成. 通常服务器和客户端浏

《JavaScript高效图形编程(修订版)》——6.4 画布与SVG的对比

6.4 画布与SVG的对比 有些人最初对苹果创建另一个浏览器图形标准持保留意见,他们可能认为SVG已经足够了.从表面上看SVG和画布提供类似的图形能力,但它们有一个根本的区别:SVG是一个高层的.基于XML的标记语言,可以通过创建XML元素属性来定义图像:而画布则提供了可以直接从JavaScript访问的绘图API. 你可以使用任何文本编辑器手动创建SVG XML,或将它从Adobe Illustrator或Inkscape等绘图软件中导出.以下的SVG例子显示了一个蓝色矩形: 要通过JavaS

《JavaScript高效图形编程(修订版)》——6.7 画布绘制基础

6.7 画布绘制基础 下面的九节将讨论基本的画布绘图命令. 6.7.1 画布元素 在网页中插入画布元素和插入任何其他HTML元素没有什么不同. 如果你不指定任何宽度或高度属性,默认大小为300×150像素.可以但不推荐通过CSS(例如,宽度:50%)改变画布大小.输出有可能是被扭曲或被缩放的,这取决于浏览器的实现.但是,你可以用CSS设置边框.边距和背景颜色,虽然这绝不会影响绘制到画布内容本身.坐标系统默认左上角为原点(0,0),因此绘制在坐标(10,15)的图案将定位在从左往右第10像素,从上

《JavaScript高效图形编程(修订版)》——6.3 画布限制

6.3 画布限制 使用画布时有一些限制,其中一些和其底层特点有关: 缺乏视觉元素的数据结构,意味着你必须在JavaScript中创建自己的对象,来更新非静态图形元素的位置和其他属性. 同样,你不能给画布中绘制的元素添加事件(如鼠标点击),因为它们并不是有形的实体,而只是瞬态的绘图操作.你必须通过编程来实现这样的功能. 充分利用画布必须有良好的JavaScript知识.

《JavaScript高效图形编程(修订版)》——6.9 画布和递归绘图

6.9 画布和递归绘图 立即模式绘图的好处之一是不需要创建和操作什么中间数据结构.在立即模式绘图中,你可以立即忘记刚刚执行的绘图命令,或者叠加多个绘图命令.这对在画布中使用高密度.递归的绘图函数(如不规则碎片形)特别有用.递归函数指的是调用自己的函数.通过将函数的上次结果返回给函数本身,我们创建了软件的反馈环路.下面的例子递归调用自己10次: 这个例子虽然很简单,但它演示了递归函数的两个重要方面: 在递归函数内修改值,然后将这个值反馈回去. 我们需要一个条件语句来跳出死循环. 下面我们将尝试用更

《JavaScript高效图形编程(修订版)》——6.8 使用画布创建动画

6.8 使用画布创建动画 使用JavaScript(或jQuery等JavaScript库)时,你可能习惯操作页面元素的位置.大小.图像或色彩,并看着它神奇地直接忘记其旧属性,而更新其新属性.按这个逻辑,如果我们不断增加一个元素的x和y位置,可以创建将此元素移到页面右下角的动画效果.但如果我们在画布上以这种方式移动方块的话,结果可能让我们很意外(如图6-13所示): 请记住画布是一个低级别和立即模式系统:每次循环在屏幕上绘制的另一个矩形,都会叠加于上次迭代的矩形之上.这样的结果是一个大涂鸦,而不

《JavaScript高效图形编程(修订版)》——6.10 用画布sprites取代DHTMLsprite

6.10 用画布sprites取代DHTMLsprite 在第2章中,我们开发了DHTML sprite动画系统,并用它创建了各种图形演示.在第5章中,我们用这个系统制作了一个DHTML视频游戏.我们尽量将绘制sprites的细节"隐藏"在DHTMLSprite对象中,使得应用程序可以很容易实现和使用一个不同的sprite系统.现在我们将在演示中使用一个新的CanvasSprite对象,它利用了性能更强的画布元素. 6.10.1 新CanvasSprite对象CanvasSprite是

《JavaScript高效图形编程(修订版)》——6.5 画布与Adobe Flash的对比

6.5 画布与Adobe Flash的对比 大多数网民都熟悉Adobe Flash.大量的在线广告内容.视频和游戏都使用了Flash.事实上,有很多网站是完全用Flash创建的.这是一个可以追溯到1996年的成熟插件,现在几乎所有系统上都安装Flash.不过 Flash也有自身的问题,HTML5(包括画布)的发展,可能预示着互联网富内容创建会有翻天覆地的变化. Flash是一个由Adobe公司所拥有的专有格式.播放Flash内容不收取费用,但开发Flash内容则需要购买相应的制作软件.用Flas

《JavaScript高效图形编程(修订版)》——6.2 位图、矢量图,或两者兼而有之?

6.2 位图.矢量图,或两者兼而有之? 画布为不同的应用,设计了一个小而精的矢量图和位图命令集.两者之间的区别是什么? 矢量图 矢量图形由直线和曲线的数学表示定义.你可以填充矢量形状或/和描绘其轮廓.矢量图形的关键优势在于它们可以缩放到任意大小而不损失质量:边缘和细节依旧锋利.矢量图最适合单色或渐变区域面积较大.细节密度较小的图像.最典型的有:图表.图形.旗帜.线路图和卡通风格的图像.因为其数学特性,JavaScript操作矢量图特别方便. 位图 位图图像(如无所不在的JPEG格式)是不同颜色的