标签
<canvas></canvas>
- 使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸.
- 默认 canvas 的宽高为 300 和 150.
- 不要使用 CSS 的方式设置宽高, 应该使用 HTML 属性.
- 如果浏览器不支持 canvas 标签, 那么就会将其解释为 div 标签. 因此常常在 canvas 中嵌入文本, 以提示用户浏览器的能力.
- canvas 的兼容性非常强, 只要支持该标签的, 基本功能都一样, 因此不用考虑兼容性问题.
- canvas 本身不能绘图. 是使用 JavaScript 来完成绘图. canvas 对象提供了各种绘图用的 api.
使用领域
- 游戏
- 可视化数据(重点)
- banner 广告
- 多媒体
- 未来
- 模拟仿真
- 远程操作
- 图形编辑
绘图步骤
- 获得
canvas
对象. - 调用
getContext
方法, 提供字符串参数'2d'
. - 该方法返回
CanvasRenderingContext2D
类型的对象. 该对象提供基本的绘图命令. - 使用
CanvasRenderingContext2D
对象提供的方法进行绘图. - 基本绘图命令
- 设置开始绘图的位置:
context.moveTo( x, y )
. - 设置直线到的位置:
context.lineTo( x, y )
. - 描边绘制:
context.stroke()
. - 填充绘制:
context.fill()
. - 闭合路径:
context.closePath()
.
- 设置开始绘图的位置:
方法
getContext()
- 作用:获取绘图上下文
- 语法:canvas.getContext('2d' || 'webgl');
var cvs = document.querySelector('canvas');
var ctx = cvs.getContext('2d');
var cvs = document.querySelector('canvas');
var ctx = cvs.getContext('2d');
moveTo()
- 作用:设置路径的起点
ctx.moveTo(x, y);
ctx.moveTo(x, y);
lineTo()
- 作用:画子路径
ctx.lineTo(100, 150);
ctx.lineTo(150, 150);
ctx.lineTo(150, 100);
ctx.lineTo(100, 150);
ctx.lineTo(150, 150);
ctx.lineTo(150, 100);
stroke()
- 作用:根据当前路径描边
ctx.stroke();
ctx.stroke();
fill()
- 作用:根据当前路径填充
ctx.fill();
ctx.fill();
beginPath()
- 作用:清除当前路径(开辟一条新路径)
- 语法:ctx.beginPath();
closePath()
- 作用:当前路径的结束点与起点连一条子路径
- 语法:ctx.closePath();
clearRect()
- 作用:以矩形的区域清除画布内容
- 语法:ctx.clearRect(x, y, w, h);
rect()
- 作用:画矩形路径
- 语法:ctx.rect(x, y, w, h);
strokeRect()
- 作用:直接绘制一个描边矩形,不会产生路径
- 语法:ctx.strokeRect(x, y, w, h);
fillRect()
- 作用:直接绘制一个填充矩形,不会产生路径
- 语法:ctx.fillRect(x, y, w, h);
arc()
- 作用:画弧路径
- 语法:ctx.arc(x, y, r, startRadius, endRadius, 是否逆时针(可选));
setLineDash([])
- 作用:设置虚线样式
- 语法:ctx.setLineDash(任意长度的数组);
ctx.setLineDash([5, 1, 10]);
ctx.setLineDash([5, 1, 10]);
getLineDash()
- 作用:获取虚线样式
- 语法:ctx.getLineDash();
strokeText()
- 作用:绘制描边文字
- 语法:ctx.strokeText(text, x, y, 限制最大占用宽度(可选));
fillText()
- 作用:绘制填充文字
- 语法:ctx.fillText(text, x, y, 限制最大占用宽度(可选));
measureText()
- 作用:预测绘制一段文字需要占用的宽
- 语法:ctx.measureText(text)
strokeStyle
- 作用:设置描边样式
fillStyle
- 作用:设置填充样式
lineWidth
- 作用:设置线宽
lineCap
- 作用:设置线帽样式
- 语法:ctx.lineCap = 'butt' || 'round' || 'square'
lineJoin
- 作用:设置线交点样式
- 语法:ctx.lineJoin = 'miter' || 'round' || 'bevel'
miterLimit
- 作用:当lineJoin为miter的时候,限制延长线是线宽的多少被,默认是10倍
lineDashOffset
- 作用:设置虚线开始位置的偏移量
font
- 作用:设置字体相关样式
textAlign
- 作用:设置文字水平对其方法
- 语法:ctx.textAlign = 'left start' || 'center' || 'right end'
textBaseline
- 作用:设置文字垂直对其方法
- 语法:ctx.textBaseline = 'top' || 'hanging' || 'middle' || 'alphcbetic' || 'ideographic' || 'bottom'
width
- 作用:设置或者获取画布的宽
- 作用:设置或者获取画布的宽
height
- 作用:设置或者获取画布的高
- 作用:设置或者获取画布的高