内容简介：最近开发网站有一个需求，要求页面上有一块区域，用户能用鼠标在上面写字，并能保存成图片 base64 码放在服务器。这样的需求用 canvas 实现是最好的。需要用到 canvas 的以下几个属性：
最近开发网站有一个需求，要求页面上有一块区域，用户能用鼠标在上面写字，并能保存成图片 base64 码放在服务器。
这样的需求用 canvas 实现是最好的。
需要用到 canvas 的以下几个属性：
- beginPath 创建一个新的路径
- globalAlpha 设置图形和图片透明度的属性
- lineWidth 设置线段厚度的属性（即线段的宽度）
- strokeStyle 描述画笔（绘制图形）颜色或者样式的属性，默认值是 #000 (black)
- moveTo(x, y) 将一个新的子路径的起始点移动到(x，y)坐标的方法
- lineTo(x, y) 使用直线连接子路径的终点到x，y坐标的方法（并不会真正地绘制）
- closePath 它尝试从当前点到起始点绘制一条直线
- stroke 它会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径，默认颜色是黑色
除了用到这些属性外，还需要监听鼠标点击和鼠标移动事件。
我对代码做了扩展，除了支持画笔，还支持喷枪、刷子、橡皮擦功能。
canvas 转成图片
将 canvas 转在图片，需要用到以下属性：
- toDataURL
canvas.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。
const image = new Image()
// canvas.toDataURL 返回的是一串Base64编码的URL
image.src = canvas.toDataURL("image/png")
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
像计算机科学家一样思考Python (第2版)
[美] 艾伦 B. 唐尼 / 赵普明 / 人民邮电出版社 / 2016-7 / 49.00
本书以培养读者以计算机科学家一样的思维方式来理解Python语言编程。贯穿全书的主体是如何思考、设计、开发的方法，而具体的编程语言，只是提供了一个具体场景方便介绍的媒介。 全书共21章，详细介绍Python语言编程的方方面面。本书从基本的编程概念开始讲起，包括语言的语法和语义，而且每个编程概念都有清晰的定义，引领读者循序渐进地学习变量、表达式、语句、函数和数据结构。书中还探讨了如何处理文件和......一起来看看 《像计算机科学家一样思考Python (第2版)》 这本书的介绍吧!
