-
基本用法
-
<canvas>
元素 - 渲染上下文(The rendering context)
- 检查支持性
-
-
绘制形状
- 绘制矩形
- 绘制路径
- 添加样式和颜色
- 绘制文本
- 使用图片
- 变形
- 合成与裁剪
- 基本动画
- 高级动画
基本用法
canvas
元素
<canvas>
标签只有两个属性—— width
和 height
,默认初始化宽度为300像素和高度为150像素,推荐 width
和 height
属性为 <canvas>
明确规定宽高,而不是使用 CSS
。
渲染上下文(The rendering context)
1 |
var canvas = document.getElementById('tutorial'); |
代码的第一行通过使用 document.getElementById()
方法来为 <canvas>
元素得到 DOM
对象。一旦有了元素对象,你可以通过使用它的 getContext()
方法来访问绘画上下文。
检查支持性
通过简单的测试getContext()
方法的存在,脚本可以检查编程支持性
1 |
var canvas = document.getElementById('tutorial'); |
绘制形状
绘制矩形
fillRect(x, y, width, height)
绘制一个填充的矩形strokeRect(x, y, width, height)
绘制一个矩形的边框clearRect(x, y, width, height)
清除指定矩形区域,让清除部分完全透明。
矩形(Rectangular)例子
1 |
function draw() { |
绘制路径
beginPath()
新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径。closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。stroke()
通过线条来绘制图形轮廓。fill()
通过填充路径的内容区域生成实心的图形。当你调用fill()函数时,所有没有闭合的形状都会自动闭合,所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
绘制一个三角形
1 |
function draw() { |
添加样式和颜色
色彩
fillStyle = color
设置图形的填充颜色。strokeStyle = color
设置图形轮廓的颜色。
color 可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象。
注意: 一旦您设置了 strokeStyle 或者 fillStyle 的值,那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色,你需要重新设置 fillStyle 或 strokeStyle 的值。
1 |
// 这些 fillStyle 的值均为 '橙色' |
fillStyle 示例
1 |
function draw() { |
strokeStyle 示例
1 |
function draw() { |
透明度 Transparency
globalAlpha = transparencyValue
这个属性影响到 canvas
里所有图形的透明度,有效的值范围是 0.0 (完全透明)到 1.0(完全不透明),默认是 1.0。
globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过,我认为下面的方法可操作性更强一点。
因为 strokeStyle 和 fillStyle 属性接受符合 CSS 3 规范的颜色值,那我们可以用下面的写法来设置具有透明度的颜色。
1 |
// 指定透明颜色,用于描边和填充样式 |
globalAlpha 示例
1 |
function draw() { |
线型 Line styles
渐变 Gradients
图案样式 Patterns
阴影 Shadows
Canvas 填充规则
绘制文本
绘制文本
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.
有样式的文本
font = value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font
属性相同的语法. 默认的字体是 10px sans-serif
。textAlign = value
文本对齐选项. 可选的值包括:start
, end
, left
, right or center
. 默认值是 start
。textBaseline = value
基线对齐选项. 可选的值包括:top
, hanging
, middle
, alphabetic
, ideographic
, bottom
。默认值是 alphabetic
。direction = value
文本方向。可能的值包括:ltr
, rtl
, inherit
。默认值是 inherit
。
预测量文本宽度
measureText()
将返回一个 TextMetrics对象的宽度、所在像素,这些体现文本特性的属性。
1 |
function draw() { |