画布的使用方式
创始人
2024-03-20 17:22:15

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

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)绘制直线:直线的起始点、直线的终点、描边(设置线条的颜色)

相关内容

热门资讯

全通教育涨2.09%,成交额2... 2月9日,全通教育盘中上涨2.09%,截至09:56,报5.87元/股,成交2797.26万元,换手...
2月6日国泰中证有色金属矿业主... 数据显示,2月6日,国泰中证有色金属矿业主题ETF(561330)遭净赎回3872.89万元,位居当...
帝尔激光股价涨5.21%,中信... 2月9日,帝尔激光涨5.21%,截至发稿,报89.42元/股,成交3.68亿元,换手率2.50%,总...
2月6日华夏中证A100ETF... 数据显示,2月6日,华夏中证A100ETF(159627)遭净赎回262.18万元,位居当日股票ET...
拓尔思股价涨5.05%,华夏基... 2月9日,拓尔思涨5.05%,截至发稿,报22.90元/股,成交3.71亿元,换手率1.87%,总市...