没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
20页
自己做的canvas帮助文档,大部分文字都是从网上找到的,本文档有对canvas标签的属性说明,也有对canvas图像Api的说明,全部都是中文,是用canvas开发web图像的精品。文档不定时更新,如果想获得最新版本,请登陆我的博客园 王清龙 联系邮箱:boylong@gmail.com 博客:http://www.cnblogs.com/qinglong 专注领域:HTML CSS Javascript Actionscript web前端;Asp Asp.net .net PHP后端编程;.net 软件开发 如果想招聘我,请联系我的邮箱,本人是应届毕业生。
资源推荐
资源详情
资源评论
Canvas 开发帮助文档(王清龙整理二〇〇九年三月二十八日)
HTML 5 <canvas> 标签
定义和用法
<canvas> 标签定义图形,比如图表和其他图像。
HTML 4.01 与 HTML 5 之间的差异
<canvas> 标签是 HTML 5 中的新标签。
<canvas> 的历史
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端
JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
<canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在
Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在
Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 <canvas> 标记。
我们甚至可以在 IE 中使用 <canvas> 标记,并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码(由
Google 发起)来构建兼容性的画布。参见:http://excanvas.sourceforge.net/
。
<canvas> 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进,目前 <canvas> 已经成为 HTML 5
草案中一个正式的标签。参见:http://www.whatwg.org/specs/web-apps/current-work/
<canvas> 标记和 SVG 以及 VML 之间的差异
<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,
而 SVG 和 VML 使用一个 XML 文档来描述绘图。
这两种方式在功能上是等同的,任何一种都可以用另一种来模拟。从表面上看,它们很不相同,可是,每一种都有
强项和弱点。例如,SVG 绘图很容易编辑,只要从其描述中移除元素就行。
要从同一图形的一个 <canvas> 标记中移除元素,往往需要擦掉绘图重新绘制它。
如何使用 <canvas> 标记绘图
大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上,而是定义在通过画布的 getContext() 方法
获
得的一个“绘图环境”对象上。
Canvas API 也使用了路径的表示法。但是,路径由一系列的方法调用来定义,而不是描述为字母和数字的字符串,
比如调用 beginPath() 和 arc() 方法。
一旦定义了路径,其他的方法,如 fill(),都是对此路径操作。绘图环境的各种属性,比如 fillStyle,说明了这些操
作如何使用。
注释:Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 <canvas> 图
形,必须要么自己绘制它再用位图图像合并它,或者在 <canvas> 上方使用 CSS 定位来覆盖 HTML 文本。
例子:
<script type="text/javascript">
function drawCanvas()
{
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
}
</script>
...
<canvas id="myCanvas">
your browser does not support the canvas tag
</canvas>
属性
属性 值 描述
hei
g
ht
p
ixel
s
设置 canvas 的高度。
width
pixel
s
设置 canvas 的宽度。
标准属性
class, contenteditable, contextmenu, dir, draggable, id, irrelevant,
lang, ref, registrationmark, tabindex, template, title
事件属性
onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,
ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,
ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,
onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,
onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
HTML5 DOM Canvas 对象
Canvas 对象
Canvas 对象表示一个 HTML 画布元素 - <canvas>。它没有自己的行为,但是定义了一个 API 支持脚本化客户
端绘图操作。
你可以直接在该对象上指定宽度和高度,但是,其大多数功能都可以通过 CanvasRenderingContext2D 对象获
得。这是通过 Canvas 对象的 getContext() 方法并且把直接量字符串 "2d" 作为唯一的参数传递给它而获得的。
<canvas> 标记在 Safari 1.3 中引入,在制作此参考页时,它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE
中,<canvas> 标记及其 API 可以使用位于 excanvas.sourceforge.net 的 ExplorerCanvas 开源项目来模拟。
提示:如果希望学习如何使用 <canvas> 来绘制图形,可以访问 Mozilla 提供的 Canvas 教程
(英文)以及相
应的 中文 Canvas 教程。
Canvas 对象的属性
height 属性
画布的高度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时
候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。
width 属性
画布的宽度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时
候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。
Canvas 对象的方法
方法 描述
g
etContext() 返回一个用于在画布上绘图的环境。
getContext()暂时实现了 2d 的 web 绘图环境,但是 3d 的环境还未实现
CanvasRenderingContext2D 对象
CanvasRenderingContext2D 对象提供了一组用来在画布上绘制的图形函数。可用的函数非常丰富,它们可以分
为以下几类:
绘制矩形
可以使用 strokeRect()
和 fillRect() 来绘制矩形的边框和填充矩形。此外,可以使用 clearRect() 来清除矩形所
定义的区域。
绘制图像
在 Canvas API 中,图像通过表示 HTML <img> 元素
的 Image 对象来指定,或者通过使用 Image() 构造函
数所创建的屏幕外图像来指定。一个 Canvas 对象
也可以用作图像来源。
可以使用 drawImage() 方法
在一个画布上绘制图像;而更为常见的形式是,允许源图像的任意矩形区域缩放或绘
制到画布上。
创建和渲染路径
画布的一项强大功能是,它能够从基本的绘图操作来构建图形,然后,绘制这些图形的框架(勾勒它们)或者给这
些图形的内容涂色(填充它们)。累计起来的操作统一叫做当前路径。一个画布只保持一条当前路径。
为了构建一个多条线段所构成的一个连续的封闭形状,绘制操作之间需要一个连接点。为此,画布保存了一个当前
位置。画布绘制操作显式地使用这个位置作为它们的起始点,并且更新它直到到达终点。可以把这看做是使用钢笔
或纸来绘画:当您完成了一条具体的线段或曲线,当前位置就是完成这一操作之后钢笔所停留的点。
可以在当前路径中创建一系列互相不连续的形状,它们都使用同样的绘制参数一起渲染。要分隔开这些形状,请使
用 moveTo()
方法,这个方法把当前的位置移动到一个新的位置而不添加一条连接线段。当您这么做的时候,就
创建了一条新的路径,这是用来表示一组连接起来的操作的画布术语。
一旦您所想要的路径形成了,可以使用 stroke()
绘制其边框,使用 fill() 来绘制其内容;或者两件事都做。
可用的图形操作有:用来绘制直线的 lineTo()
,用于绘制矩形的 rect(),用于绘制部分圆形的 arc() 或 arcTo(),
以及用于绘制曲线的 bezierCurveTo()
或 quadraticCurveTo()。
除了勾勒和填充,还可以使用当前路径来指定绘制时画布所使用的剪切区域。这个区域中的像素是显示的,区域之
外的像素是不显示的。剪切区域是累加性的;调用 clip()
可以将当前路径和当前绘制区域取交集,产生一个新的
区域。不幸的是,没有直接的方法把当前的剪切区域设置为画布的范围;要做到这一点,必须保存和恢复画布的整
个图形状态。
如果任何子路径中的线段没有形成一个闭合的图形,fill() 和 clip() 操作通过添加一条从子路径的起点到终点的、
虚拟(勾勒的时候看不到)线段来闭合它。可选的是,也可以调用 closePath()
来显示地添加这条线段。
颜色、渐变和模式
在填充和勾勒路径时,可用 fillStyle 和 strokeStyle 属性来指定线段或者绘制区域如何绘制。CSS 样式颜色字符
串,以及描述渐变和模式的 CanvasGradient
或 CanvasPattern 都是可以接受的。要创建一个渐变,请使用
createLinearGradient() 或 createRadialGradient()。要创建一个模式,请使用 createPattern()。
要用 CSS 表示法来指定不透明的颜色,就采用 "#RRGGBB" 形式的字符串,其中 RR、GG 和 BB 分别是指定
颜色的红色、绿色和蓝色成分的十六进制,其值都在 00 和 FF 之间。例如,完全红色的值是 "#FF0000"。要指
定部分透明的颜色,请使用一个 "rgba(R,G,B,A)" 形式的字符串。在这种形式中,R、G 和 B 将颜色的红色、绿
色和蓝色成分指定为 0 到 255 之间的十进制整数,并且 A 把 alpha(不透明)成分指定为 0.0 (完全透明)
和 1.0 (完全不透明)之间的一个浮点数值。例如,半透明的完全红色为 "rgba(255,0,0,0.5)"。
线条宽度、线帽和线条连接
画布为调整各种线条显示提供了几个选项。可以使用 lineWidth 属性来指定线条的宽度,用 lineCap 属性来指定
的端点如何绘制,并且用 lineJoin 属性来指定线条如何连接。
坐标空间和转换
默认情况下,一个画布的坐标空间使用画布的左上角 (0,0) 作为原点,x 值向右增加,y 值向下增加。这个坐标空
间中的一个单位通常转换为像素。
然后,可以转换坐标空间,产生你在绘图操作中所指定的用来移动、缩放或旋转的任何坐标或范围。这通过
translate()
、scale() 和 rotate() 方法来实现,它们会对画布的变换矩阵产生影响。由于坐标空间可以像这样转换,
您传递给 lineTo() 这样方法的坐标可能无法用像素来度量。因此,Canvas API 使用浮点数而不是整数。
变换按照它们被指定的顺序相反的顺序来处理。例如,调用 scale() 之后,紧接着调用 translate(),这会首先变换
坐标系统,然后再缩放。
组合
通常,图形是一个绘制于另一个的上面,新的图形使得在它之前绘制在其下方的图形变得模糊。这是一个画布中的
默认行为。然而,您可以通过为 globalCompositeOperation 属性
指定不同的值来执行很多有趣的操作,范围包
括从 XOR 操作到增量或减暗图形区域。
阴影
Canvas API 包含了可以自动为您所绘制的任何图形添加下拉阴影的属性。然而,在编写本参考页时,Safari 是唯
一实现了这一 API 的浏览器。阴影的颜色可用 shadowColor 属性来指定,并且可以通过 shadowOffsetX 和
shadowOffsetY 属性来改变。另外,应用到阴影边缘的羽化量也可以使用 shadowBlur 属性来设置。
保存图形状态
save()
和 restore() 方法允许你保存和恢复一个 CanvasRenderingContext2D 对象的状态。save() 把当前状态
推入到栈中,而 restore() 从栈的顶端弹出最近保存的状态,并且根据这些存储的值来设置当前绘图状态。
CanvasRenderingContext2D 对象的所有属性(除了画布的属性是一个常量)都是保存的状态的一部分。变换矩
阵和剪切区域也是这个状态的一部分,但是当前路径和当前点并不是。
CanvasRenderingContext2D 对象的属性
canvas 属性
这个环境可以绘制于其上的 Canvas 元素。
fillStyle 属性
用来填充路径的当前的颜色、模式或渐变。这个属性可以设置为一个字符串或者一个 CanvasGradient 对象
或
CanvasPattern 对象
。当设置为一个字符串时,它被解析为一个 CSS 颜色值并且用来进行实心填充。当设置为一
个 CanvasGradient 或 CanvasPattern 对象,通过使用指定的渐变或模式来完成填充。
globalAlpha 属性
指定在画布上绘制的内容的不透明度。这个值的范围在 0.0(完全透明)和 1.0(完全不透明)之间。默认值为 1.0。
globalCompositeOperation 属性
指定颜色如何与画布上已有的颜色组合(合成)。如需更多细节,请参阅 globalCompositeOperation 属性参考
页。
lineCap 属性
指定线条的末端如何绘制。合法的值是 "butt"、"round" 和 "square"。默认值是 "butt"。如需更多细节,请参
阅 lineCap 属性参考页
。
lineJoin 属性
指定两条线条如何连接。合法的值是 "round"、"bevel" 和 "miter"。默认值是 "miter"。如需更多细节,请参阅
lineJoin 属性参考页
。
lineWidth 属性
指定了画笔(绘制线条)操作的线条宽度。默认值是 1.0,并且这个属性必须大于 0.0。较宽的线条在路径上居中,
每边有线条宽的一半。
miterLimit 属性
当 lineJoin 属性为 "miter" 的时候,这个属性指定了斜连接长度和线条宽度的最大比率。如需更多细节,请参阅
miterLimit 属性参考页
。
shadowBlur 属性
指定羽化阴影的程度。默认值是 0。阴影效果得到 safari 的支持,但是并没有得到 FireFox 1.5 或 Opera 9 的
支持。
shadowColor 属性
把阴影的颜色指定为一个 CSS 字符串或 Web 样式字符串,并且可以包含一个 alpha 部分来表示透明度。默认
值是 black。阴影效果得到 Safari 的支持,但是并没有得到 FireFox 1.5 或 Opera 9 的支持。
shadowOffsetX, shadowOffsetY 属性
指定阴影的水平偏移和垂直偏移。较大的值使得阴影化的对象似乎漂浮在背景的较高位置上。默认值是 0。阴影效
果得到 Safari 的支持,但是并没有得到 FireFox 1.5 或 Opera 9 的支持。
strokeStyle 属性
指定了用于画笔(绘制)路径的颜色、模式和渐变。这个属性可能是一个字符串,或者一个 CanvasGradient 对
象 或 CanvasPattern 对象。如果是一个字符串,它被解析为一个 CSS 颜色值,并且画笔用所得的实色来绘制。
如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象,画笔使用这个渐变或模式来实现。
CanvasRenderingContext2D 对象的方法
方法 描述
arc() 用一个中心点和半径,为一个画布的当前子路径添加一条弧线。
arcTo() 使用目标点和一个半径,为当前的子路径添加一条弧线。
be
g
inPath() 开始一个画布中的一条新路径(或者子路径的一个集合)。
剩余19页未读,继续阅读
longtsingw
- 粉丝: 2
- 资源: 11
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页