更多文章

近来开辟网站有一个需求，请求页面上有一块地区，用户能用鼠标在上面写字，并能保留成图片 base64 码放在服务器。
如许的需求用 canvas 实现是最好的。
须要用到 canvas 的以下几个属性：

• beginPath 建立一个新的途径
• globalAlpha 设置图形和图片透明度的属性
• lineWidth 设置线段厚度的属性（即线段的宽度）
• strokeStyle 形貌画笔（绘制图形）色彩或许款式的属性，默许值是 #000 (black)
• moveTo(x, y) 将一个新的子途径的起始点挪动到(x，y)坐标的要领
• lineTo(x, y) 运用直线连接子途径的终点到x，y坐标的要领（并不会真正地绘制）
• closePath 它尝试从当前点到起始点绘制一条直线
• stroke 它会现实地绘制出经由过程 moveTo() 和 lineTo() 要领定义的途径，默许色彩是黑色

除了用到这些属性外，还须要监听鼠标点击和鼠标挪动事宜。

空话就不多说了，直接上代码和 DEMO。

我对代码做了扩大，除了支撑画笔，还支撑喷枪、刷子、橡皮擦功用。

canvas 转成图片

将 canvas 转成图片，须要用到以下属性：

• toDataURL

canvas.toDataURL() 要领返回一个包括图片展现的 data URI 。能够运用 type 参数其范例，默许为 PNG 花样。图片的分辨率为96dpi。

    const image = new Image()
    // canvas.toDataURL 返回的是一串Base64编码的URL
    image.src = canvas.toDataURL("image/png")