微信小程序 canvas画图

最新推荐文章于 2022-07-27 13:59:28 发布

清风追云月

最新推荐文章于 2022-07-27 13:59:28 发布

阅读量378

点赞数 1

分类专栏：编程 js css 微信小程序文章标签：微信小程序画图 canvas

本文链接：https://blog.csdn.net/zxc84265137/article/details/96996031

版权

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

	  //绘制矩形框
	  //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时，会根据比例进行改变，这样画布画出来的大小就可以根据屏幕分辨率不同进行变化。
设置字体