canvas图片画圆角-蒲公英云

canvas图片画圆角

冷不防 2023-01-11 08:52 340阅读 0赞

获取屏幕比率

有的手机屏幕实际分辨率的像素比页面过去的尺寸像素要大，一遍是一倍或者两倍

var getPixelRatio = function(context) {
  var backingStore = context.backingStorePixelRatio ||
      context.webkitBackingStorePixelRatio ||
      context.mozBackingStorePixelRatio ||
      context.msBackingStorePixelRatio ||
      context.oBackingStorePixelRatio ||
      context.backingStorePixelRatio || 1;
  return (window.devicePixelRatio || 1) / backingStore;
};

初始化canvas

var canvas = document.createElement('canvas')//画布
var ctx = canvas.getContext("2d"); 
var ratio = getPixelRatio(ctx); // 获取屏幕比率
canvas.width = 750*ratio; // 设置生成图片容器的宽高
canvas.height = 1335*ratio; 
ctx.clearRect(0,0,canvas.width,canvas.height); // 设置背景颜色
ctx.fillStyle = '#000000';
ctx.fillRect(0,0,canvas.width, canvas.height);

画矩形图片+圆角

/*
     *  参数说明
     *  ctx Canvas实例
     *  img 图片地址
     *   x  x轴坐标
     *   y  y轴坐标
     *   w  宽度
     *   h  高度
     *   r  弧度大小
     */
    drawRoundRect(ctx, r, x, y, w, h, img) {
      ctx.save();
      if (w < 2 * r) r = w / 2;
      if (h < 2 * r) r = h / 2;
      ctx.beginPath();
      ctx.moveTo(x + r, y);
      ctx.arcTo(x + w, y, x + w, y + h, r);
      ctx.arcTo(x + w, y + h, x, y + h, r);
      ctx.arcTo(x, y + h, x, y, r);
      ctx.arcTo(x, y, x + w, y, r);
      ctx.closePath();
      ctx.clip();
      ctx.drawImage(img, x, y, w, h);
      ctx.restore(); // 返回上一状态
    },

圆形头像

/*
     *  圆角图片=>参数说明
     *  ctx Canvas实例
     *  img 图片地址
     *   x  x轴坐标
     *   y  y轴坐标
     *   r  圆形半径
     */
    circleImg(ctx, img, x, y, r) {
      ctx.save();
      var d = 2 * r;
      var cx = x + r;
      var cy = y + r;
      ctx.arc(cx, cy, r, 0, 2 * Math.PI);
      ctx.clip();
      ctx.drawImage(img, x, y, d, d);
      ctx.restore();
    },