h5 canvans在微信浏览器写字会触发下拉

h5 canvas在微信浏览器写字会触发下拉是因为微信浏览器在手机端上具有一种称为"全面屏优化"的特性。当在微信浏览器中使用h5 canvas进行绘图，特别是在绘制过程中使用到了触摸事件时，用户手指在画布上滑动，微信浏览器会误将该操作视为页面下拉的手势操作。

这种误触下拉的原因在于微信浏览器为了适应手机全面屏的特性，引入了一种滑动操作的检测机制。当用户手指在页面上进行垂直滑动时，微信浏览器会判断该滑动操作是否可以触发页面下拉的动作，以提升用户体验。

然而，在h5 canvas上绘制时，绘图操作往往会涉及到用户手指在画布上的触摸事件，用户手指的滑动被误判为页面下拉的手势操作，导致页面被下拉，从而中断了绘图的过程。

为了解决这个问题，可以尝试以下方法：
1. 在canvas元素上添加touchstart、touchmove、touchend等触摸事件监听器，并阻止事件冒泡或默认行为，以防止微信浏览器误判操作。
2. 可以使用第三方库或框架，如createjs、egret等，来实现画布绘制，这些库或框架通常会对各种浏览器的兼容性问题进行处理，包括微信浏览器下的问题。

如果以上方法无法解决问题，那可能是由于微信浏览器的特性限制造成的，可以考虑使用其他浏览器或开发移动端应用程序来实现画布绘制，以避免微信浏览器中的下拉误触问题。

相关问题

在html2canvans截图的页面如何添加图片水印能够平铺到页面上并且旋转45度再通过appd方法需要去掉data的base64传参然后分享到微信

要在html2canvas截图的页面上添加图片水印，可以通过CSS样式将该图片设置为背景图，并使用background-repeat和background-size属性进行平铺和缩放。通过transform属性可以将背景图旋转45度。

添加水印的代码示例如下：

body {
  background-image: url('watermark.png');
  background-repeat: repeat;
  background-size: 200px 200px;
  transform: rotate(45deg);
}

为了通过appd方法分享到微信，需要将截图转换为图片文件，并通过base64编码将图片数据传递给appd方法。

以下是通过canvas.toDataURL()方法将截图转换为图片文件，并通过base64编码传递给appd方法的示例代码：

// 获取截图的canvas元素
var canvas = document.getElementById('myCanvas');

// 将canvas转换为图片文件，并获取base64编码
var dataURL = canvas.toDataURL('image/png');

// 去除data:和base64编码中的逗号
var base64 = dataURL.replace(/^data:image\/(png|jpg);base64,/, '');

// 调用appd方法分享到微信
appd.shareToWechat({
  type: 'image',
  data: base64,  // 传递图片数据的base64编码
  title: '分享标题',
  desc: '分享描述',
  link: '分享链接',
  imgUrl: '分享图片地址'
});

需要注意的是，微信分享要求图片不能超过32KB，因此在截图时应该控制图片的尺寸和质量，以便在base64编码后不超过32KB。

使用watermark -plus插件在html2canvans分享时才生成水印在图片上

好的，你的问题是如何在使用html2canvas分享时，使用watermark-plus插件生成水印在图片上。可以按照以下步骤实现：

1. 在html中引入html2canvas和watermark-plus插件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdn.bootcss.com/watermarkjs/1.0.8/watermark.min.js"></script>

2. 使用html2canvas将需要分享的DOM节点转换成canvas：

html2canvas(document.getElementById('shareContent'), {
  useCORS: true,
  onrendered: function(canvas) {
    // 在此处添加生成水印的代码
  }
});

3. 在onrendered回调函数中，使用watermark.plus插件生成水印并添加到canvas中：

html2canvas(document.getElementById('shareContent'), {
  useCORS: true,
  onrendered: function(canvas) {
    // 生成水印
    var watermark = watermarkjs([canvas])
      .image(watermarkImageSrc)
      .then(function(watermarkedCanvas) {
        // 将生成的水印canvas添加到原始canvas中
        canvas.getContext('2d').drawImage(watermarkedCanvas, 0, 0);
        // 在此处将canvas转换成图片并进行分享
      });
  }
});

其中，`watermarkImageSrc`是水印图片的路径。最后，可以将canvas转换成图片并进行分享。