Canvas 对象
Canvas 对象表示一个 HTML 画布元素 - <canvas>
。它没有自己的行为,但是定义了一个 API getContext('2d')
支持脚本化客户端绘图操作。
- 设置画布宽
canvas.width = 200;
- 设置画布高
canvas.height = 300;
- 使用toDataURL将图片转为dataURL(base64)
canvas.toDataURL("image/png");
- 使用toBlob方法将图片转为blob对象
canvas.toBlob(function (blob) {})
let canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 300;
canvas.style.border="1px dashed #ccc";
document.body.appendChild(canvas);
CanvasRenderingContext2D 对象的方法
<canvas>
标签只是图形容器,您必须使用脚本来绘制图形。通过Canvas实例对象的getContext('2d')
方法可以返回一个CanvasRenderingContext2D
对象,操作画布的大多数方法都是采用这个对象的方法。HTML5还有一个WebGL规范,允许在Canvas中绘制3D图形getContext("webgl")
- canvas.getContext('2d') - 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var ctx = canvas.getContext('2d');
CanvasRenderingContext2D
对象拥有以下属性和方法
- arc() 用一个中心点和半径,为一个画布的当前子路径添加一条弧线。
- arcTo() 使用目标点和一个半径,为当前的子路径添加一条弧线。
- beginPath() 开始一个画布中的一条新路径(或者子路径的一个集合)。
- bezierCurveTo() 为当前的子路径添加一个三次贝塞尔曲线。
- clearRect() 在一个画布的一个矩形区域中清除掉像素。
- clip() 使用当前路径作为连续绘制操作的剪切区域。
- closePath() 如果当前子路径是打开的,就关闭它。
- createLinearGradient() 返回代表线性颜色渐变的一个 CanvasGradient 对象。
- createPattern() 返回代表贴图图像的一个 CanvasPattern 对象。
- createRadialGradient() 返回代表放射颜色渐变的一个 CanvasGradient 对象。
- drawImage() 绘制一幅图像。
- fill() 使用指定颜色、渐变或模式来绘制或填充当前路径的内部。
- fillRect() 绘制或填充一个矩形。
- lineTo() 为当前的子路径添加一条直线线段。
- moveTo() 设置当前位置并开始一条新的子路径。
- quadraticCurveTo() 为当前路径添加一条贝塞尔曲线。
- rect() 为当前路径添加一条矩形子路径。
- restore() 为画布重置为最近保存的图像状态。
- rotate() 旋转画布。
- save() 保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。
- scale() 标注画布的用户坐标系统。
- stroke() 沿着当前路径绘制或画一条直线。
- strokeRect() 绘制(但不填充)一个矩形。
- translate() 转换画布的用户坐标系统。
例子
矩形
- ctx.rect(x,y,width,height) 创建矩形。
- ctx.fillRect(x,y,width,height) 绘制并填充一个矩形
- ctx.strokeRect(x,y,width,height) 绘制矩形(无填充)。
- ctx.clearRect(x,y,width,height) 在给定的矩形内清除指定的像素。
创建矩形
ctx.rect(0,0,200,200)
ctx.stroke()
绘制填充矩形
ctx.fillStyle="green"
ctx.fillRect(0,0,200,200)
绘制矩形(无填充)
ctx.strokeStyle='red'
ctx.strokeRect(10,10,180,180)
在给定的矩形内清除指定的像素
ctx.fillStyle='red'
ctx.fillRect(0,0,200,200)
ctx.clearRect(20,20,100,50)
路径 - 线条
- ctx.moveTo(x,y) 定义线条开始坐标
- ctx.lineTo(x,y) 定义线条结束坐标
- ctx.beginPath() 起始一条路径,或重置当前路径。
- ctx.closePath() 创建从当前点回到起始点的路径。
- ctx.stroke() 绘制已定义的路径。
- ctx.clip() 从原始画布剪切任意形状和尺寸的区域。
- ctx.isPointInPath(x,y) 返回当前的路径点是否在画板中
- ctx.arcTo(x1,y1,x2,y2,r) 创建介于两个切线之间的弧/曲线
- ctx.quadraticCurveTo(cpx,cpy,x,y) 创建二次贝塞尔曲线。
- ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 创建三次贝塞尔曲线。
绘制线条我们必须使用到ink
的方法,就像stroke()
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.lineTo(80,250);
ctx.stroke();
//开始一条新路径,画线,闭合路径
ctx.beginPath();
ctx.moveTo(20,20)
ctx.lineTo(100,150)
ctx.lineTo(180,20)
ctx.closePath()
ctx.stroke()
//从上一个路径裁剪一个区域
ctx.clip();
ctx.fillStyle = 'green'
ctx.fillRect(0,0,150,100)
创建二次贝塞尔曲线。
ctx.beginPath()
ctx.moveTo(20,20)
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke()
创建三次贝塞尔曲线
ctx.beginPath()
ctx.moveTo(20,20)
ctx.bezierCurveTo(20,100,200,100,200,20)
ctx.stroke()
创建介于两个切线之间的弧/曲线。
ctx.beginPath()
ctx.moveTo(20,20)
ctx.lineTo(100,20)
ctx.arcTo(150,20,150,50,50)
ctx.lineTo(150,120)
ctx.stroke()
路径-画圆
- ctx.beginPath() 开始一个画布中的一条新路径
- ctx.arc(x,y,r,start,stop) 用一个中心点和半径,为一个画布的当前子路径添加一条弧线。
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
路径 - 填充
- fill() 填充当前绘图(路径)。
ctx.rect(10,10,180,180)
ctx.fillStyle = "red"
ctx.fill();
文本
- ctx.font - 定义字体
- ctx.fillText(text,x,y) - 绘制实心文本
- ctx.strokeText(text,x,y) - 绘制空心文本
ctx.font = '30px Arial';
ctx.fillText('Hello word',30,30)
ctx.strokeText('你好 世界',30,60)
渐变
- createLinearGradient(x,y,x1,y1) -创建线条渐变
- createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象,必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.
使用线条渐变createLinearGradient
//创建一个线条渐变
let grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,'red')
grd.addColorStop(1,'green')
//填充渐变
ctx.fillStyle=grd
ctx.fillRect(10,10,150,80)
使用径向渐变createRadialGradient
//创建一个径向/圆渐变
let grd = ctx.createRadialGradient(100,100,5,100,100,100);
grd.addColorStop(0,'red')
grd.addColorStop(1,'green')
//使用渐变填充圆形
ctx.arc(100,100,100,0,2*Math.PI);
ctx.fillStyle=grd
ctx.fill();
图像
- ctx.drawImage() 绘制一幅图像到画布上
let img = document.getElementById('scream');
img.onload = ()=>{
ctx.drawImage(img,10,10)
}