今天先花点简单的篇幅和大家介绍下canvas。
1. 基本篇
1.1. 什么是 Canvas
canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现.
canvas 英 [‘kænv?s] 美 [‘kænv?s] 帆布 画布
1.1.1. canvas 的基本用法
基本语法
<canvas></canvas>
- 使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸.
- 默认 canvas 的宽高为 300 和 150.
- 不要使用 CSS 的方式设置宽高, 应该使用 HTML 属性.
- 如果浏览器不支持 canvas 标签, 那么就会将其解释为 div 标签. 因此常常在 canvas 中嵌入文本, 以提示用户浏览器的能力.
- canvas 的兼容性非常强, 只要支持该标签的, 基本功能都一样, 因此不用考虑兼容性问题.
- canvas 本身不能绘图. 是使用 JavaScript 来完成绘图. canvas 对象提供了各种绘图用的 api.
canvas 的使用领域
canvas 的使用领域很多:
- 游戏
- 可视化数据(重点)
- banner 广告
- 多媒体
- 未来
- 模拟仿真
- 远程操作
- 图形编辑
1.1.2. 我们的目标
- 学会使用基本的 canvas api, 使用 canvas 可以完成简单的绘图
- 实现数据的可视化
1.2. 基本绘图
1.2.1. 基本绘图方法
绘图步骤
- 获得
canvas
对象. - 调用
getContext
方法, 提供字符串参数‘2d‘
. - 该方法返回
CanvasRenderingContext2D
类型的对象. 该对象提供基本的绘图命令. - 使用
CanvasRenderingContext2D
对象提供的方法进行绘图. - 基本绘图命令
- 设置开始绘图的位置:
context.moveTo( x, y )
. - 设置直线到的位置:
context.lineTo( x, y )
. - 描边绘制:
context.stroke()
. - 填充绘制:
context.fill()
. - 闭合路径:
context.closePath()
.
- 设置开始绘图的位置:
01-绘制基本线
var canvas = document.createElement( ‘canvas‘ );
canvas.width = 500;
canvas.height = 400;
canvas.style.border = ‘1px dashed red‘;
document.body.appendChild( canvas );
// 获得 CanvasRenderingContext2D 对象
var context = canvas.getContext( ‘2d‘ );
// 设置 起点
context.moveTo( 0, 0 );
// 绘制直线
context.lineTo( 500, 400 );
// 设置 起点
context.moveTo( 0, 400 );
// 绘制直线
context.lineTo( 500, 0 );
// 描边显示效果
context.stroke();
1.2.1.1. getContext 方法
语法: Canvas.getContext( typeStr )
描述:
- 该方法用于绘制上下文工具.
- 如果是绘制平面图形使用
‘2d‘
作为参数, 如果绘制立体图形使用‘webgl‘
. - 使用
‘2d‘
返回CanvasRenderingContext2D
类型的对象. - 使用
‘webgl‘
返回WebGLRenderingContext
类型的对象.
1.2.1.2. moveTo 方法
语法: CanvasRenderingContext2D.moveTo( x, y )
描述:
- 该方法用于设置绘制起点.
- 其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.
1.2.1.3. lineTo 方法
语法: CanvasRenderingContext2D.lineTo( x, y )
描述:
- 该方法用于设置需要绘制直线的另一个点. 最终描边后会连线当前点和方法参数描述的点.
- 其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.
1.2.1.4. stroke 方法
语法: CanvasRenderingContext2D.stroke()
描述: 该方法用于连线, 将描述的所有点按照指定顺序连接起来.
1.2.1.5. 结论
- 绘图先要获得上下文, 即绘图工具
- 绘图需要设置开始的坐标
- 绘图是先描点, 然后一个一个依次连线
- 依次绘图只能绘制单一样式( 色彩等 )
时间: 2024-10-13 23:57:20