【canvas 图形画布标签】(使用详解)
canvas 图形画布标签
- 1. 如何定义一个 图形画布 ?
- 1.1 canvas 图形画布 标签的属性 有哪些 ?
- 1.2 canvas 图形画布的 基本用法 有哪些 ?
- 1.3 如何使用 canvas 图形画布 标签 来绘制图形 ?
- 1.3.1 画布栅格和坐标空间
- 1.3.2 绘制矩形
- 1.3.3 绘制路径
- 1.3.4 移动笔触
- 1.3.5 绘制 线段
- 1.3.6 绘制 圆弧和圆弧
- 1.3.7 二次 贝塞尔曲线 和三次 贝塞尔曲线
- 1.3.8 绘制 矩形路径
- 1.3.9 Path2D 对象
- 1.3.10 使用 SVG paths
- 1.4 给图形 添加样式和颜色
- 1.4.1 给图形添加颜色
- 1.4.2 透明度: 设置图形透明度
- 1.4.3 线型:线的样式
- 1.4.4 设置 图形渐变色 Gradients
- 1.4.5 图案样式 Patterns
- 1.4.6 阴影 Shadows
- 1.4.7 Canvas 图形填充规则
- 1.5 在 canvas 图形中 绘制文本
- 1.5.1 绘制文本的 2 种方法
- 1.5.2 设置文本的样式
- 1.5.3 预测量文本
- 1.6 canvas 图形画布的 图像操作能力: 使用图像
- 1.6.1 获得 需要绘制的图片
- 1.6.2 在图形画布中 绘制图片
- 1.7 变形: 对图形画布的网格 旋转和缩放
- 1.7.1 图形画布 状态的 保存和恢复
- 1.7.2 移动: 移动 图形画布原点
- 1.7.3 旋转: 对图形旋转
- 1.7.4 图形的缩放
- 1.7.5 变形 : 一次性设置 (缩放 + 倾斜 + 移动)
- 1.8 图形的 合成与裁剪
- 1.8.1 图形的合成
- 1.8.2 裁剪: 隐藏 裁剪区外的图形
- 1.9 动画: 会动的图形
- 1.9.1 基本动画
- 1.10 像素操作
- 1.10.1 ImageData 对象
- 1.10.2 创建一个 ImageData 图像数据 对象
- 1.10.3 得到场景像素数据: 获得 ImageData 对象
- 1.10.4 在画布中 写入像素数据
- 1.11 canvas 画布的优化: 改善性能
1. 如何定义一个 图形画布 ?
- 用于
- 如何定义一个 图形画布 ? (在上面 绘制图形)
- 使用
图形画布 标签 - ['kænvəs]
- 使用
- 如何定义一个 图形画布 ? (在上面 绘制图形)
- 使用
图形画布 标签 可以 直接绘制图形吗 ?- 不可以,
图形画布 标签 只是 图形容器，要使用脚本 来绘制图形。
- 不可以,
图形画布 标签的浏览器支持- IE 8 以及更早的版本不支持
图形画布 标签。
- IE 8 以及更早的版本不支持
- 如何通过
图形画布 标签 来画出一个 红色的矩形：
<canvas id="myCanvas">your browser does not support the canvas tag canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#ff0000';
ctx.fillRect(0,0,80,100);
script>
- 测试
- 一个红色的矩形
1.1 canvas 图形画布 标签的属性 有哪些 ?
图形画布 标签的属性
| 属性名 | 属性值 | 用于 |
|---|---|---|
| ① height | = number ,单位 pixels | 设置 canvas 画布的高度。 |
| ② width | = number ,单位 pixels | 设置 canvas 画布的宽度。 |
-
图形画布 标签的属性- canvas 只有 2个属性:
height高度 属性和width宽度 属性 - canvas-
height/width图形画布 宽高属性的属性值- canvas-
height/width="number px" - pixels
- canvas-
- 规定 以像素计
- 没有设置 宽高时,Canvas 图形画布的默认大小 为多少 ?
- 300像素×150像素（宽×高，像素的单位是 px）矩形画布
- canvas 只有 2个属性:
-
canvas-宽高重设 = 清空画布:
- 每当画布的高度或宽度被 重设时, 画布内容 就会被清空
-
清空画布
- 通过重设 width 或 height 属性来清空画布（使用 JavaScript）
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Your browser does not support the canvas element.
canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#92B901";
cxt.fillRect(50,50,100,100);
function clearCanvas()
{
c.height=c.height;
}
script>
<br />
<button onclick="clearCanvas()">清空画布button>
body>
图形画布 标签 和 SVG 以及 VML 之间的差异- 不同点:
图形画布 标签 和 SVG 以及 VML 之间的不同点- 基于js:
有一个基于 JavaScript 的绘图 API - XML 文档: SVG 和 VML 使用一个 XML 文档 来描述绘图。
- 基于js:
- 相同点:
- 功能等同: 这两种方式在功能上是等同的，任何一种 都可以用另一种来模拟。
- 移除元素:
- 移除元素: SVG 绘图 很容易编辑，只要从其描述中移除元素就行。
- 重新绘制: 要从同一图形的一个
图形画布 标签中 移除元素，需要擦掉绘图 重新绘制它。
- 不同点:
1.2 canvas 图形画布的 基本用法 有哪些 ?
- ⑴ 如何使用
图形画布 标签 绘图 ?-
图形 API定义: 大多数 Canvas 绘图 API 定义在 什么上 ?
- 都没有 定义在
图形画布 标签 本身上，而是定义在 通过画布的 getContext() 方法 获得的一个“绘图环境”对象上。
- 都没有 定义在
-
图形 路径的定义: 路径由 一系列的方法调用 来定义，比如调用 beginPath() 和 arc() 方法,而不是描述为 字母和数字的字符串。
-
图形 路径操作: 一旦定义了路径，其他的方法，如 fill()，都是对此路径 操作。
- 绘图环境的各种属性，比如 fillStyle，说明了这些操作 如何使用。
-
API 紧凑原因: = 无绘制文本支持. 一个原因上 它没有对 绘制文本 提供任何支持。
-
画布上加文本: 要把文本加入到一个
图形画布 上- 自己绘制它 再用位图图像 合并它
- 在
图形画布 上方 使用 CSS 定位 来覆盖 HTML 文本。
-
- ⑵ 如何定义 canvas 图形画布的大小 ?
- 用 CSS 定义画布宽高: 可以使用 CSS 来定义大小，但在绘制时 图像会伸缩 以适应它的框架尺寸
- 画布扭曲: 如果 CSS 的尺寸 与初始画布的 比例不一致，它会出现扭曲。
- 使用
图形画布 标签的height/width属性:- 如果绘制出来的图像 是扭曲的, 尝试用 标签的
width/height属性为画布 明确规定宽高，而不是使用 CSS。( 难道标签的属性 比 css 的属性 更好用 ?) - 总结:
图形画布的宽高,最好用 标签的宽高属性 canvas-height/width定义,而不是 css .
- 如果绘制出来的图像 是扭曲的, 尝试用 标签的
- ⑶
图形画布 的样式- 画布 能设置样式:
图形画布 元素可以像 普通图像一样 设置样式吗 ?- 可以. 有 margin，border，background 等等属性。
- 可以为 画布 设置边框,背景色等.
- 画布样式 不会影响在canvas 画布中的实际图像。
- 可以. 有 margin，border，background 等等属性。
- 画布默认样式 - 透明:如果没有为 canvas 画布 规定样式，画布会 完全透明。
- 示例1: 想让画布变成可见,可以为画布 规定一个边框
- 画布 能设置样式:
<body>
<canvas id="myCanvas" style="border:1px solid">
Your browser does not support the canvas element.
canvas>
body>
- 测试
- 画布 没有设置宽高时,默认是 300*150 的 矩形画布
- 在 canvas-
style样式属性中,设置边框后,透明画布 可见了
- 示例2: 定义一个 200px*200px 的正方形画布,并且为画布设置一个绿色边框,让画布可见
<canvas id="myCanvas" height="200px" width="200px" style="border:1px solid green">
Your browser does not support the canvas element.
canvas>
- 测试
- 指定了宽高 边框 的正方形画布
- ⑷
图形画布 标签的替代内容- 为什么要设置 canvas 画布的 替代内容 ?
- 老版本浏览器不支持 canvas 图形画布 标签:
- 由于某些较老的浏览器（尤其是IE9之前的IE浏览器）
- 浏览器类型不支持:
- 文本浏览器 不支持HTML元素"canvas"
- 在这些浏览器上 不能显示画布,要有替代内容,才知道内容是什么。
- 老版本浏览器不支持 canvas 图形画布 标签:
- canvas 图形画布的 替代内容的显示
- 不支持
画布 的浏览器:- 会忽略画布容器 ,显示 替代内容。
- 支持
画布 的浏览器:- 忽略 canvas 标签中的替代内容，只渲染 canvas 画布图形。
- 总结: 支持 画布标签 = 显示 画布图形内容,不支持画布,才显示画布标签中的替代内容
- 不支持
- 用什么做 canvas 图形画布的 替代内容
- 画布的文字描述: 对 canvas 图形画布的内容的文字描述
- 画布的静态图片: 是提供动态生成内容 相对应的静态图片
- 不支持 canvas 标签的浏览器,才会显示 对应的文字描述 或者图片
- 不设置图形的替代内容,怎么表示 ?
- 不写标签内容:
- 在所有支持 canvas 的浏览器中 , 都是完全兼容的。
- 不写标签内容:
- 为什么要设置 canvas 画布的 替代内容 ?
<canvas id="stockGraph" width="150" height="150">
current stock price: $3.15 +0.15
canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt=""/>
canvas>
- ⑸ 画笔下笔地方: 渲染上下文 (The rendering context)
- 画布起始空白: canvas 图形画布 起初是空白的,一张白纸一样,什么都没画。
- 找一块下笔处:
- 在什么上面 绘制图形 ?
- 为了展示，首先脚本需要找到 渲染上下文( 就是图形上下笔的地方)，然后在它的上面 绘制图形。
- 这个下笔的地方,不是 canvas 图形画布标签,相当于 canvas 画布上,找一个更具体的位置了.(个人理解的)
- 在什么上面 绘制图形 ?
- 怎么找到这个下笔处 ?
- canvas-
getContext()获取上下文 方法图形画布 元素 有一个叫做getContext()的方法 , 用来获得 渲染上下文(下笔处)和它的绘画功能。
- canvas-
getContext()获取上下文 方法介绍getContext()回去上下文 方法 只有一个参数，上下文的格式。- 对于 2D图像而言，可以使用 CanvasRenderingContext2D。
- 什么是 2D图像 ?
- 2D图形内容 只有 水平的X轴向与垂直的Y轴向，传统手工漫画、插画等都属于2D类.
- 什么是3D图像 ?
- 3D图，即空间立体图形,三维图 所有的图形是在X Y Z三维空间里。常用的三维绘图软件如：3DMax.
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
- 代码解析
- 获取对象:
图形画布的对象:- 第一行通过使用
document.getElementById()用id 获取元素 方法 来为画布 元素得到 DOM 对象。
- 第一行通过使用
- 获取对象的上下文(画笔下笔处):
- 一旦有了元素对象，你可以通过使用它的
getContext()方法来 访问绘画上下文。
- 一旦有了元素对象，你可以通过使用它的
- 获取对象:
- ⑹ 检查 canvas 图形画布 标签的支持性
- 替换内容是用于 哪里 ?
- 用在不支持
图形画布 标签的浏览器中展示的。
- 用在不支持
- 检查标签的支持性:
- 通过 测试
getContext()获取上下文 方法的存在，脚本可以 检查编程支持性。 - 这个方法是 canvas 图形画布 对象的,标签存在,方法才存在(在不支持 canvas 标签的浏览器中,这个标签 相当于不存在吗 ?)
- 通过 测试
- 替换内容是用于 哪里 ?
<script type="text/javascript">
// 通过元素 唯一名称 id ,获取 canvas 元素对象
var canvas = document.getElementById('tutorial');
if (canvas.getContext){//如果 getContext() 获取上下文 方法 存在, 为真
var ctx = canvas.getContext('2d');
// drawing code here(绘图代码)
} else {
// canvas-unsupported code here(不支持 canvas 图形画布 标签的代码)
}
script>
1.3 如何使用 canvas 图形画布 标签 来绘制图形 ?
1.3.1 画布栅格和坐标空间
- ⑴ 画布栅格和坐标空间
- 画布栅格（canvas grid）
- 画布被网格覆盖:
- canvas 图形画布 默认被网格所覆盖。
- 网格中的一个单元(1个正方形) = canvas 元素中的一像素。
- 画布栅格的起点
- 画布栅格的起点 定义在什么位置 ?坐标是多少 ?
- 左上角（坐标为（0,0））。
- 画布栅格的起点 定义在什么位置 ?坐标是多少 ?
- 相对位置: 所有元素的位置 都是相对于什么位置的 ?
- 相对于 原点 = 左上角 = (0,0)。
- 下图中 蓝色方形 左上角的坐标 为（x,y）
- x: 距离左边（y轴）x像素
- y 距离上边（x轴）y像素
1.3.2 绘制矩形
- 什么是矩形: 至少有三个内角 都是直角的四边形 = 矩形 = 长方形 + 正方形
- ⑴ 绘制图形和路径:
- 原生图形绘制: 矩形 (不需要生成路径)
- canvas 图形画布 标签 只支持一种 原生的图形绘制,是什么图形 ?
- 矩形。
- 绘制图形 需要路径: 其他的图形的绘制,都至少需要 生成一条路径。
- 原生图形绘制: 矩形 (不需要生成路径)
- ⑵ 绘制矩形的 3 种方法：
- ① 填充矩形
- 使用
fillRect(x, y, width, height)填充矩形 方法 , 绘制一个填充的矩形 - ② 画矩形边框
- 使用
strokeRect(x, y, width, height)画矩形 方法, 绘制一个矩形的边框 .(单纯就是一个矩形)
- 使用
- ③ 清除矩形区域:
- 使用
clearRect(x, y, width, height)清除矩形区域 方法, 清除 指定矩形区域，让清除部分完全透明。
- 使用
- 3 种矩形绘制方法 的相同点
- 方法 参数相同。
- x与y: 矩形的左上角坐标
- (在 canvas 画布上 所绘制的矩形的左上角, 相对于原点的坐标)。
- width和height: 设置矩形的 宽高尺寸.
- 示例1: 绘制一个 宽高 都为100px的矩形 (宽高相等 = 正方形,)
- 标签嵌套关系
文档主体 标签图形画布 标签
- 标签嵌套关系