目录
调用canvas图形库
<canvas width="500" height="400" id="canvas"></canvas>
//获取画布
var canvas = document.getElementById('canvas')
//获取2D画笔
var cxt = canvas.getContext('2d')
绘制长方形的两种方法
方法1 cxt.rect(x,y,w,h) //绘制长方形路径
cxt.fill() //绘制实心长方形
cxt.stroke() //绘制空心长方形
方法2 cxt.fillRect(x,y,w,h) //绘制实心长方形
cxt.strokeRect(x,y,w,h) //绘制空心长方形
绘制圆形
cxt.arc(x,y,r,起始角度,终止角度,方向)
绘制线段
cxt.beginPath() //断开和上次路径的联系
cxt.moveTo(x0,y0) //将画笔移动到x0,y0
cxt.lineTo(x1,y1) //添加画到x1,y1位置的线段
cxt.lineTo(x2,y2) //添加画到x2,y2位置的线段
cxt.closePath() //闭合本次路径
绘制二次贝塞尔曲线
二次贝塞尔曲线有一个控制点 x0,y0表示 控制点的坐标
cxt.quadraticCurveTo(x0,y0,x1,y1)
绘制三次贝塞尔曲线
三次贝塞尔曲线有两个控制点 x0,y0 x1,y1 分别表示两个控制点的坐标
cxt.quadraticCurveTo(x0,y0,x1,y1,x2,y2)
绘制图片
cxt.drawImage(图片节点,x,y,w,h)
cxt.drawImage(图片节点,sx,sy,sw,sh,x,y,w,h) 裁切图片
绘制视频
cxt.drawImage(视频节点,x,y,w,h)
绘制文字
cxt.font = ’20px 微软雅黑’ //设置字体大小和字体系列
cxt.textAlign = left/right/center //设置文本相对于起始点的位置
cxt.textBaseLine = top/bottom/hanging/middle //设置文本的相对于基线的竖直位置
cxt.fillText(文字,x,y) //在x,y处绘制文字
绘制文字阴影
cxt.shadowOffsetX = 数值
cxt.shaodowOffsetY = 数值
cxt.shadowColor = 颜色
cxt.shadowBlur = 数值 0-1
cxt.measureText(文本) 测量文本的宽度
cxt.strokeStyle = 颜色 设置绘制空心图形画笔的颜色
cxt.fillStyle = 颜色 设置绘制实心图形画笔的颜色
cxt.lineWidth = 数值 设置画笔的宽度值
cxt.lineCap = butt/round/square 设置线段的两端样式 butt为默认值
cxt.lineJoin = miter/round/bevel 设置两个线段连接处的样式 miter为默认值
线性渐变
var color = cxt.createLinearGradient(x1,y1,x2,y2) 创建线性渐变 x1,y1 为渐变的起点 x2,y2 为渐变的终点 color.addColorStop(0,颜色1) //渐变起点色
color.addColorStop(0.5,颜色2)
color.addColorStop(1,颜色3) //渐变终点色
cxt.fillStyle = color //让画笔应用该线性渐变
径向渐变
var color = cxt.createRadialGradient(x1,y1,r1,x2,y2,r2)
//创建径向渐变 x1,y1,r1 为渐变的起始圆 x2,y2,r2 为渐变的终止圆
color.addColorStop(0,颜色1) //渐变起点色
color.addColorStop(0.5,颜色2)
color.addColorStop(1,颜色3) //渐变终点色
cxt.fillStyle = color //让画笔应用该线性渐变
画布变换
cxt.createImageData(w,h) 创建w*h的区域来存储像素点
cxt.getImageData(x,y,w,h) 从x,y点开始获取w*h区域的像素点
cxt.putImageData(数据,x,y) 从x,y点开始往画布里填充数据
cxt.translate(x,y) 改变画布的起始点位置
cxt.rotate(角度) 围绕画布起点旋转指定角度
cxt.scale(x,y) 清空画布
重合显示状态
cxt.globalCompositeOperation 设置两个图片的重合部分的显示情况
属性值 | 作用 |
source-over | 默认 源图像在上面 |
source-atop | 超过目标图像的源图像全都不可见 目标图像是可见的 |
source-in | 只有在目标图像之内的源图像是可见的 目标图像是不见的 |
source-out | 只有在目标图像之外的源图像是可见的 目标图像是不见的 |
destination-over | 目标图像在上面 |
destination-atop | 超过源图像的目标图像全都不可见 源图像是可见的 |
destination-in | 只有在源图像之内的目标图像是可见的 源图像是不见的 |
destination-out | 只有在源图像之外的目标图像是可见的 源图像是不见的 |
xor | 设置两个图像重合的部分透明 |