canvas常用基础总结

canvas基本使用

<!--画布宽高在属性中设置-->
<canvas id="canvas" width="500" height="400"></canvas>
复制代码

// 获取画布
const canvas = document.getElementById('canvas')
// 获取2d画笔
const cox = canvas.context('2d')
复制代码

// 清空画布
convas.clearRect(x,y,w,h)
复制代码

绘制线条

// 设置起始点
cox.moveTo(x,y)
// 绘制线条
cox.lineTo(x,y)
// 描边
cox.strake()
// 填充
cox.fill()
//闭合路径
cox.closePath()
//新建路径
cox.beginPath()
复制代码

绘制矩形

// 绘制矩形
cox.rect(x,y,w,h)
// 绘制并描边
cox.strakeRect(x,y,w,h)
// 绘制并填充
cox.fillRect(x,y,w,h)
复制代码

绘制样式

lineStyle 线条宽度,默认1px
strokeStyle  描边样式,只支持color
fillStyle  填充样式,只支持
lineCap 线条末端样式(默认butt) round(圆角) square(方形)
lineJoin  线条相交样式(morenmiter)  round(圆角)  bevel(平角)
复制代码

绘制文字

// 绘制填充文字
// 参数1:  绘制的文字
// 参数2:  位置
// 参数3:  最大宽度,文字宽度大于最大宽度时文字会被压缩
fillText(text,x,y,[maxwidth])
复制代码

// 绘制为未填充文字
strokeText(text,x,y,[maxwidth])
// 获取文字对象
measureText() obj.width可获取宽度
复制代码

绘制图片

// img:图片对象
// x,y代表图片左上角坐标
// w,h图标绘制尺寸的大小,会缩放图片
// 需要等待图片加载成功后在调用该方法
var img = mew Image();
img.src = '路径'
img.onload=function (){
  drawImage(img,x,y,w,h) 
}
复制代码

// x,y,w,h 表示图片的左上角位置坐标和大小
// x1,y1,w1,h1 表示画布显示区域的中心点坐标和大小
drawImage(img,x,y,w,h,x1,y1,w1,h)
复制代码

绘制动画

requestAnimationFrame()类似于setTimeOut,需要在递归函数中实现

function frame (){
    console.log('动画')
    requestAnimationFrame(frame)
}
frame()
复制代码

转载于:https://juejin.im/post/5cee2d755188252d1820580f