canvas 画圆角图片

canvas 画圆角图片

const util = require('./util.js');


      let params ={
        left:left, top:top, width:width, height:height, borderRadius:10}
      ctx.save()
      util.toDrawRadiusRect(params,ctx) 
      ctx.strokeStyle = 'rgba(255,255,255,0)'
      ctx.stroke()
      ctx.clip()
      ctx.drawImage(Imagepath, left, top, imgwidth, imgheight);
      ctx.restore()

const toDrawRect = (params, ctx) => {
  const {
    left, top, width, height, borderRadius,
    borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius
  } = params
  ctx.beginPath()
  if (borderRadius) {
    const br = borderRadius / 2
    ctx.moveTo(left + br, top) 
    ctx.lineTo(left + width - br, top) 
    ctx.arcTo(left + width, top, left + width, top + br, br) 
    ctx.lineTo(left + width, top + height - br) 
    ctx.arcTo(left + width, top + height, left + width - br, top + height, br) 
    ctx.lineTo(left + br, top + height)
    ctx.arcTo(left, top + height, left, top + height - br, br)
    ctx.lineTo(left, top + br) 
    ctx.arcTo(left, top, left + br, top, br)
  } else {
    const topLeftBr = borderTopLeftRadius ? borderTopLeftRadius / 2 : 0
    const topRightBr = borderTopRightRadius ? borderTopRightRadius / 2 : 0
    const bottomRightBr = borderBottomRightRadius ? borderBottomRightRadius / 2 : 0
    const bottomLeftBr = borderBottomLeftRadius ? borderBottomLeftRadius / 2 : 0
    ctx.moveTo(left + topLeftBr, top)
    ctx.lineTo(left + width - topRightBr, top)
    if (topRightBr) {
      ctx.arcTo(left + width, top, left + width, top + topRightBr, topRightBr)
    }
    ctx.lineTo(left + width, top + height - bottomRightBr)
    if (bottomRightBr) {
      ctx.arcTo(left + width, top + height,
        left + width - bottomRightBr, top + height, bottomRightBr)
    }
    ctx.lineTo(left + bottomLeftBr, top + height)
    if (bottomLeftBr) {
      ctx.arcTo(left, top + height, left, top + height - bottomLeftBr, bottomLeftBr)
    }
    ctx.lineTo(left, top + topLeftBr)
    if (topLeftBr) {
      ctx.arcTo(left, top, left + topLeftBr, top, topLeftBr)
    }
  }
}
module.exports = {
  toDrawRect :toDrawRect 
}