移动端canvas不支持rem的解决方案

前一阵开发一套答题系统,最后需要把背景图,二维码以及文字等生成一张图,最后分享出去,没什么复杂的逻辑,就是在适配的时候出现了问题,canvas不支持rem这个单位(rem相信大家或多或少都用过),在chrome测试没发现问题,就是真机测试,字小的看不到。

其实解决方案也很简单,把rem还原回px:你的整体页面可能是这样的:1rem=20px;以宽度375px作为基准(750的,720的也都一个道理,换算好就可以了),比如一行文字的大小是1.2rem:

var textPx = document.body.clientWidth * 20 / 375;

ctx.font = "bold " + 1.2 * textPx + "px" + " Arial";

换算之后拼接一下就可以了。

总结:从需求出来到上线就两天时间,之前也没怎么用过canvas,算是做个笔记吧。

此外,还有文字根据长短自动缩放、文字换行的问题(canvas处理文字的确有点麻烦):

第一个问题:设置fillText最后一个参数,文字最大宽度,可以解决

第二个问题:可以封装一个方法,主要通过measureText来判断文字长度,来绘制文字位置,方法如下(可以根据实际需求更改)

  function canvasTextNext(str, ctx, initX, initY,lineHeight) {
  var lineWidth = 0;
  var canvasWidth = document.body.clientWidth;
  var lastSubStrIndex = 0;
  for (var i = 0; i < str.length; i++) {
    lineWidth += ctx.measureText(str[i]).width;
    if (lineWidth > canvasWidth - initX) {
      ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
      initY += lineHeight;
      lineWidth = 0;
      lastSubStrIndex = i;
    }
    if (i == str.length - 1) {
      ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
    }
  }
}

str:需要换行的字符串
ctx:创建的canvas画布
initX, initY:坐标
lineHeight:行高
复制代码

这些东西上网应该都可以查到,简单整理了一下,希望能帮助大家节省一些开发时间

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现移动端canvas的缩放与拖拽平移可以通过以下步骤实现: 1. 监听手势事件,例如touchstart、touchmove、touchend等。 2. 在touchstart事件中记录手指的起始位置,以及canvas的起始位置和尺寸。 3. 在touchmove事件中计算手指移动的距离,根据距离改变canvas的尺寸或位置,从而实现缩放和平移。 4. 在touchend事件中记录canvas的最终位置和尺寸。 下面是一个简单的示例代码,实现了canvas的缩放和平移: ```javascript var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var lastX, lastY, startX, startY, startWidth, startHeight; var isDragging = false, isScaling = false; canvas.addEventListener('touchstart', function(e) { var touch = e.touches[0]; lastX = startX = touch.clientX; lastY = startY = touch.clientY; startWidth = canvas.width; startHeight = canvas.height; isDragging = true; }); canvas.addEventListener('touchmove', function(e) { var touch = e.touches[0]; if (e.touches.length == 1 && isDragging) { var deltaX = touch.clientX - lastX; var deltaY = touch.clientY - lastY; canvas.style.left = (startX + deltaX) + 'px'; canvas.style.top = (startY + deltaY) + 'px'; } else if (e.touches.length == 2) { isDragging = false; var touch1 = e.touches[0]; var touch2 = e.touches[1]; var dist = Math.sqrt(Math.pow(touch1.clientX - touch2.clientX, 2) + Math.pow(touch1.clientY - touch2.clientY, 2)); if (!isScaling) { isScaling = true; startWidth = canvas.width; startHeight = canvas.height; } var scale = dist / Math.sqrt(Math.pow(lastX - lastY, 2) + Math.pow(touch1.clientY - touch2.clientY, 2)); canvas.width = startWidth * scale; canvas.height = startHeight * scale; } lastX = touch.clientX; lastY = touch.clientY; }); canvas.addEventListener('touchend', function(e) { isDragging = false; isScaling = false; }); ``` 这段代码中,我们监听了canvas的touchstart、touchmove和touchend事件,用于实现canvas的缩放和平移。在touchstart事件中记录了手指的起始位置和canvas的起始尺寸和位置,在touchmove事件中计算手指移动的距离,并根据距离改变canvas的尺寸和位置,从而实现缩放和平移。在touchend事件中记录canvas的最终位置和尺寸。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值