基础

//初识canvas：不同的canvas需要不同的id，不要循环创建 宽高写在标签里面 绘图 有先后有顺序

<canvas id="canvasId"><span>不支持canvas的浏览器</span></canvas>

var oC = document.getElementById('canvasId')
var oGc = oC.getContext('2d')
//0，基本属性
oGc.fillStyle = 'red';//填充颜色
oGc.strokeStyle = 'red';//边框颜色
oGc.lineJoin = 'bevel'//方形的四个角 bevel斜角 round圆角
oGc.lineCap = 'round'//画线的两端 round圆角 square（会变长，长度多出为宽一半的值）

//1，画方形 fill填充 起点 宽高  oGc.rect() oGc.fill() == fillRect()
oGc.fillRect(10,10,50,50)
oGc.strokeRect(70.5,10.5,60,60)


//2，清除画布 坐标 和 宽高。如果需要绘制动画，则需要在每次绘制之前清空上一次的绘画
oGc.clearRect(20,20,10,20) 

//3，画线 或者 三角
oGc.beginPath()
oGc.moveTo(180,10)
oGc.lineTo(220,10)
oGc.lineTo(150,50)
// oGc.closePath() //闭合  如果开始和闭合联合使用，可以避免属性影响多个绘图
oGc.stroke()

//4，画圆 save restore
oGc.save()
oGc.strokeStyle = 'blue'; // save restore 闭合使用，使得fillStyle只在其中起作用
oGc.moveTo(350,50)
oGc.arc(350,50,50,-90*Math.PI/180,30*Math.PI/180,false) //坐标 半径 起始弧度：默认3点钟方向 结束弧度 旋转方向：默认false顺时针
// oGc.closePath() //可选
oGc.stroke()
oGc.restore()

//5，曲线
oGc.moveTo(10,180) //起点
oGc.strokeStyle = 'blue';
oGc.arcTo(10,100,100,100,20) //两个点  20为半径内切圆切掉
oGc.stroke()

//6，贝塞尔曲线
// quadraticCurveTo(dx,dy,x1,y1) //加起点 控制点拉伸 终点
// bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)//加起点 控制点拉伸  控制点拉伸 终点

动态绘图 变换

//动态绘制
num = 0
oGc.fillRect(0,100,50,50)
setInterval(function(){
     num++;
     oGc.clearRect(0,100,400,300) //清空上次的绘制
     oGc.fillRect(0+num,100+num,50,50)
},50)

//变换 save restore clearRect setInterval 配合使用 完成动画
// translate(x,y) //变换起点
// rotate(45*Math.PI/180) //旋转
// scale(2,3) //宽2倍 高3倍

绘制图片 和 图片背景

var myImg = new Image()
myImg.src = 'a.png'
myImg.onload = function(){
    // draw1(this)
    draw2(this)
}
function draw1(obj){
    //宽高不写 会自适应
    oGc.drawImage(obj,10,10,200,100)
}
function draw2(obj){
    //repeat repeat-x repeat-y no-repeat
    var bg = oGc.createPattern(obj,'repeat-x')
    oGc.fillStyle = bg
    oGc.fillRect(0,0,400,400)
}

渐变

//线性 两个点
// var obj  = oGc.createLinearGradient(100,100,200,200)
//放射性渐变的 圆坐标，圆半径  圆坐标，圆半径
var obj  = oGc.createRadialGradient(200,200,100,200,200,50)

obj.addColorStop(0,"#f00")
obj.addColorStop(1,"#0f0")
oGc.fillStyle = obj
oGc.fillRect(100,100,200,200)

绘制文本

//第二个参数可以随便写 但是一定要写
oGc.font = '50px impact'
//左右 默认居左 end right center
oGc.textAlign = 'left'
//默认alphabetuc 不是最上边的，一般会改掉 top middle bottom
oGc.textBaseline = 'top'
//空心文本 开始绘制的点，与textAlign  textBaseline 相关
oGc.strokeText('文本绘制',0,0)   

// 阴影 
oGc.shadowOffsetX = 10;
oGc.shadowOffsetY = 10;
//默认颜色 （0，0，0，0）
oGc.shadowColor = "#00f";
//模糊值
oGc.shadowBlur = 3;

// 获取文本的宽，不能获取高 高就是文字的大小 可以做一些居中
var w = oGc.measureText('文本绘制').width
oGc.fillText('文本绘制',(400-w)/2,(400-60)/2)

像素

//像素data 是一个数组，四位表示一个像素(r,g,b,a)，因此100x100的宽高，数组长度应该是40000
oGc.getImageData(x,y,w,h)
oGc.putImageData(x,y,w,h)
//创建一个新的 像素区域
var newImg = oGc.createImageData(w,h)
oGc.putImageData(newImg,x,y)

可以做马赛克 倒影 反转等

合成

//导出图片
let imgSrc = oC.toDataURL
//全局 globalAlpha
//oGc.globalCompositeOperation = 'xor'

//事件操作 判断是否在canvas绘制区域
oGc.isPointInPath(x,y)