画布的使用方式-创新互联

一、’注册—登录—主页’作业中的技术点：

1、前端：

​ （1）input file标签的样式处理

​ （2）文件类型的设置：accept属性来指定

​ （3）input file选择的图片立即显示出来（不上传）

//将input file得到的文件地址进行转换，转换后不用经过服务器端就可以直接访问
window.URL.createObjectURL(imgFile.files[0])

​ （4）进行请求的数据的封装：使用FormData对象进行封装

2、后台：使用formidable解析前端提交的FormData数据，解析方法是：

let form = new formidable.IncomingForm()
form.encoding = ‘utf8’
form.uploadDir = cacheFolder
form.keepExtensions = true
form.maxFieldsSize = 2 1024 1024 // 1K=1024B 1M=1024K
form.type = true //上传文件的类型为只读

form.parse(req,(err,field,files)=>{})
 参数err：表示解析过程中的错误信息
 参数field：在前端通过formdata封装的普通的key-value
 参数files：用来解析formdata中封装的信息
           ```

二、H5（HTML5）的新增技术

1、绘图：画布（canvas）的使用

2、画布：页面中用于绘制图形的特殊区域，开发人员可以在这个区域内进行自定义图形的绘制

​ （1）创建画布的方法：

 您的浏览器不支持画布

​ （2）获取画布：getElementById(‘canvas的id’)

​ （3）获取画笔：使用context对象，语法格式是：

let  context = canvas.getContext('2d')  //context代表的是一支笔

​ （4）绘制直线：直线的起始点、直线的终点、描边(设置线条的颜色)

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧