描述
<canvas>标签用于绘制图像，但是元素本身并没有绘制能力，而是通过getContext()方法返回一个对象，该对象提供了用于在画布上绘图地方法和属性
浏览器支持
- IE9+
- Firefox
- Opera
- Safari
- Chrome
颜色、样式和阴影
- fillStyle 设置或返回用于填充绘画地颜色、渐变或模式
- strokeStyle 设置或返回用于笔触地颜色、渐变或模式
- shadowColor 设置或返回用于阴影地模糊级别
- shadowOffsetX 设置返回阴影距形状地水平距离
- shadowOffsetY 设置或返回阴影距形状地垂直距离
- createLinearGradient() 创建线性渐变（用于画布内容上）
- createPattren() 在指定的方向上重复指定的元素
- createRadialGradient() 创建放射状/环形的渐变
- addColorStop() 规定渐变对象中的颜色和停止位置
线条样式
- lineCap 设置或返回线条的结束端点样式
- lineJoin 设置或返回两条线相交时，所创建的拐角类型
- lineWidth 设置或返回当前的线条宽度
- miterLimit 设置或返回最大斜接长度
矩形
- rect() 创建矩形
- fillRect() 绘制“被填充”的矩形
- strokeRect() 绘制矩形（无填充）
- clearRect() 在给定的矩形内清除指定的像素
<canvas id="demo" width="600" height="600" style="border: 1px solid #ccc">
你的浏览器不支持canvas
</canvas> let canvas = document.getElementById('demo');
let ctx = canvas.getContext('2d');
// 绘制矩形
ctx.beginPath();
ctx.rect(450, 100, 50, 50);
ctx.fillStyle = '#999'; // 设置填充的样式
ctx.strokeStyle = '#000'; // 设置绘制的样式
ctx.stroke(); // 绘制路径
ctx.fill(); // 填充当前绘图
路径
- fill() 填充当前绘图
- stroke() 绘制已定义的路径
- beginPath() 起始一条路径，或者重置当前路径
- moveTo() 把路径移动到画布中的指定点，不创建线条
- closePath() 创建从当前点回到起始点的路径
- lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
- clip() 从原始画布剪切任意形状和尺寸的区域
- arc() 创建弧/曲线
- arcTo() 创建两切线之间的弧/曲线
- isPointInPath() 如果指定的点位于当前路径中，则返回true，否则返回false
let canvas = document.getElementById('demo');
let ctx = canvas.getContext('2d');
// 绘制圆形 context.arc(x,y,r,sAngle,eAngle,counterclockwise);
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.arc( 100, 100, 50, 0, 2*Math.PI);
ctx.stroke();
// 绘制一个扇形
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.strokeStyle = 'green';
ctx.fillStyle = 'yellow'
ctx.arc( 100, 100, 50, 0.5*Math.PI, 1.2 * Math.PI);
ctx.closePath();
ctx.stroke();
ctx.fill();
转换
- scale() 缩放当前绘图至更大或更小
- rotate() 旋转当前绘图
- translate() 重新映射画布上的 (0,0) 位置
- transform() 替换绘图的当前转换矩阵
- setTransform() 将当前转换重置为单位矩阵
文本
font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
fillText() 在画布上绘制“被填充”的文本
strokeText() 在画布上绘制文本(无填充)
measureText() 返回包含指定文本宽度的对象
let canvas = document.getElementById('demo');
let ctx = canvas.getContext('2d');
// 文本
ctx.font="20px Arial";
ctx.fillStyle = '#333';
ctx.fillText("圆形", 265, 110)
// 线条
ctx.beginPath();
ctx.strokeStyle = '#999'
ctx.moveTo( 150, 100);
ctx.lineTo( 250, 100);
ctx.stroke();
// 小圆
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.arc( 255, 100, 5, 0, 2 * Math.PI);
ctx.stroke();
图像绘制
- drawImage() 向画布绘制图像、画布或视频
像素操作
width 返回ImageData对象的宽度
height 返回ImageData对象的高度
data 返回一个对象，其中包含指定的ImageData对象的图像数据
createImageData() 创建新的，空白的ImageData对象
getImageData() 返回ImageData对象，该对象为画布上指定的矩形复制像素数据
putImageData() 把图像数据返回画布
合成
globalAlpha 设置或返回绘制的当前alpha或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
其他
save() 保存当前环境的状态
restore() 返回之前保存过的路径状态和属性