详解html5 canvas 微信海报分享（个人爬坑）

首先我们需要了解HTML5 Canvas以及微信海报分享的相关知识，然后根据文章中的攻略，进行实操和调试，最终完成自己的微信海报分享。

HTML5 Canvas简介

HTML5的canvas元素是用于在网页上绘制图像的标签，通过使用Javascript API，我们可以在Canvas上绘制不同类型的图像，包括但不限于圆形、线条、文本、图片等。

微信海报分享的实现步骤

1. 绘制海报：在canvas上绘制需要展示的内容，例如背景图、头像、二维码等元素。
2. 转换为图像：使用canvas的toDataURL()方法将canvas保存成图像，格式为png或jpeg。
3. 生成分享卡片：调用微信的JS-SDK，将步骤二中的图像上传至微信服务器，并生成分享卡片。

示例一：绘制简单海报

<canvas id="myCanvas" width="750" height="1334"></canvas>

使用以上代码创建canvas标签，设置id、宽度和高度。

const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
const img = new Image()
img.src = 'img/bg.jpg'
img.onload = () => {
  ctx.drawImage(img, 0, 0, 750, 1334)//绘制背景图
  ctx.fillStyle = 'white'
  ctx.fillRect(100, 100, 100, 100)//绘制白色矩形
  ctx.lineWidth = 2
  ctx.strokeStyle = 'black'
  ctx.strokeRect(100, 100, 100, 100)//绘制黑色边框
}

使用以上代码绘制海报，包括背景图、矩形和边框。

示例二：转换为图像

const imgData = canvas.toDataURL('image/png')
document.getElementById('image').src = imgData

使用以上代码将canvas转换为png图像并展示在img标签上。

综上所述，我们可以通过HTML5 Canvas和微信JS-SDK进行绘制和分享的操作，为网站增加更多的交互和用户体验。