微信小程序 canvas画图

最新推荐文章于 2024-05-30 01:51:11 发布

原创

最新推荐文章于 2024-05-30 01:51:11 发布 · 470 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #画图 #canvas

在微信小程序中，使用canvas进行画图时需要注意矩形截取的实现方式，因为直接的矩形框截取在手机上可能无效，需通过画线来模拟。此外，由于不同手机屏幕像素差异，要计算'rpx'来确保画布元素大小适应屏幕。对于字体设置，建议同时使用setFontSize和新的font属性，以防接口失效。同时，文章提到了绘制圆形在海报制作中的应用。

矩形截取
矩形截取时，不能使用矩形框进行截取，在开发工具预览中，虽然可以看到效果，但是手机上是不行的，只能使用画线的方式，画出一个矩形，进行截取区域

	  //绘制矩形框
	  //x、y:矩形左上角横纵坐标
	  //width、height:矩形的宽高
      ctx.moveTo(x, y);
      ctx.lineTo(x+ width, y);
      ctx.lineTo(x+ width, y+ height);
      ctx.lineTo(x, y+ height);
      ctx.lineTo(x, y);
      ctx.clip();

相对大小
在画图过程中，所有设置的大小，单位都是px，但是同样的像素，在不同的手机上看到的会存在差异，为了解决这个问题，在页面中，通常都是设置rpx为单位的值，至少在大多数手机中可以保证看到相同的画面，但是画布中没有rpx这个单位，那么，只能去计算这个“rpx”，在页面onload时获取屏幕的宽度，（在开发工具中，我设置的预览时iphone7的手机分辨路，宽度375像素）用屏幕的宽度除以750（也就是375*2），得到的值，就是“rpx”，在开发阶段，所有画布中的值都是像素乘以2，再乘以rpx这个全局变量，当手机的屏幕不是375时，会根据比例进行改变，这样画布画出来的大小就可以根据屏幕分辨率不同进行变化。
设置字体

ctx.font = 'normal 16px sans-serif';

ctx.setFontSize(16);
ctx.setTextAlign('left');
ctx.fillStyle = '#FFFFFF';

在官网的API中提到setFontSize等设置字体的方法之后不再维护，改用新的属性font设置，但是之前出现过一次font属性失效的问题，过段时间就好了，可能是微信更新时出问题了，建议在设置字体样式时，进行双设置，以免新方法出现问题或旧接口失效的问题

最低0.47元/天解锁文章