画布的使用方式

news2024/11/24 0:10:54

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

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中封装的<input type='file'>信息
           ```

二、H5(HTML5)的新增技术

1、绘图:画布(canvas)的使用

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

​ (1)创建画布的方法:

<canvas  id="画布的标识" width="宽度"  height="高度">
     您的浏览器不支持画布
</canvas>

​ (2)获取画布:getElementById(‘canvas的id’)

​ (3)获取画笔:使用context对象,语法格式是:

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/64845.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

搭建K8s集群

前言&#xff1a;本次将通过kubeadm部署1个master节点&#xff0c;2个worker节点K8s集群&#xff0c;本次集群使用的容器运行工具为docker(题外话&#xff1a;K8s的容器运行工具也可以用docker、containerd、cio等等&#xff0c;其中containerd是一个轻量级、工业级的容器运行工…

aws eks 使用paker构建自定义ami

资料 如何创建用于 Amazon EKS 的自定义 Amazon Linux AMI&#xff1f; 构建预置容器镜像的EKS自定义AMI解决方案 https://github.com/awslabs/amazon-eks-ami https://github.com/awslabs/amazon-eks-ami/blob/master/doc/USER_GUIDE.md https://developer.hashicorp.com/…

[Cortex-M3]-3-分散加载文件解析(.sct)

目录 1 分散加载文件.sct 2 如何生成.sct文件 3 *(InRoot$$Sections) 说明 4 如何修改分散加载文件 5 已经初始化变量的初值&#xff0c;存储位置 6 RW ZI和RO如何执行 1 分散加载文件.sct MDK的分散加载主要是通过.sct文件实现的&#xff0c;链接器根据.sct…

黄菊华老师,Python毕业设计毕设辅导教程(2):Python开发准备,Window 平台安装 Python

Python3 开发准备 Python3 可应用于多平台包括 Windows、Linux 和 Mac OS X。 Unix (Solaris, Linux, FreeBSD, AIX, HP/UX, SunOS, IRIX, 等等。)Win 9x/NT/2000Macintosh (Intel, PPC, 68K)OS/2DOS (多个DOS版本)PalmOSNokia 移动手机Windows CEAcorn/RISC OSBeOSAmigaVMS/…

网络安全专业学习路线

​最专业、全面的网络安全学习路线来咯~&#xff08;虽然是网络安全学习路线&#xff0c;但重心还是在Web安全上&#xff09; 展示学习路线之前&#xff0c;建议大家先了解一下这几个问题&#xff0c;既是认清形势&#xff0c;也是认清自我&#xff1a; 为什么要学网络安全&a…

二 TypeScript 基础(初识和语法)

变量 什么是变量 变量是存储信息的容器,其中的值(内容)是可变的。 变量的声明 我们使用var关键字来声明变量&#xff0c;新的关键字let来声明带有(块级作用域)属性的变量。 var a 或者 let a 使用 来赋值 var a 1; //如果只声明变量,井没有赋值的话,该变量的值为 undef…

初识TypeScript编译器(tsc)

须知少时凌云志&#xff0c; 曾许人间第一流。 哪晓岁月蹉跎过&#xff0c; 依旧名利俩无收。 文章目录1. 安装 TypeScript2. 熟悉tsc的编译选项3. 编译.ts文件4. TS报错后那JS呢4.1 通过noEmitOnError禁止在出错的情况下编译出JS目标文件5. 查看编译生成的JS文件5.1 通过targe…

数据库分库分表方案

一、数据库瓶颈 不管是IO瓶颈&#xff0c;还是CPU瓶颈&#xff0c;最终都会导致数据库的活跃连接数增加&#xff0c;进而逼近甚至达到数据库可承载活跃连接数的阈值。在业务Service来看就是&#xff0c;可用数据库连接少甚至无连接可用。接下来就可以想象了吧&#xff08;并发…

文华财经期货量化短线策略支撑压力指标公式,短线行情无未来函数多空均线红涨绿跌信号

很多人从行情历史走势图发现&#xff0c;金叉行情上涨&#xff0c;死叉行情下跌的规律&#xff0c;告诉大家那些完美冬形只是过去式而已&#xff0c;行情震荡时&#xff0c;指标失灵可以把你震荡到爆仓。我们也会经常发现不好的指标在很多情况下会相互矛盾&#xff0c;这个指标…

[程序人生] [世界杯] 程序员世界杯的熬夜调节套餐 - 茶叶篇

&#x1f341;简介 最近看世界杯熬夜,搞点小酒(百威/威士忌/各种洋酒) 配花生米,再搞点串 简直人生不要太爽, 但是&#xff01;&#xff01;&#xff01; 问题来了&#xff0c;几天下来 喉咙不适,肺部不适觉得痰多, 查了一下是酒辛辣食品太多了&#xff01;早上萎靡不振咖啡提神…

车载诊断新驱动——远程诊断

文章目录 前言一、远程诊断作用二、解决方案三、现状和趋势总结前言 今天是2022年12月5日&#xff0c;终于迎来了疫情尾声的消息。 分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工科男&#xff1a; 与其热闹着引人注目&#xff0c;步步紧逼&#xff0c;不如趋向…

基于springboot的作业管理系统设计与实现

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

软件测试基础篇(3)

测试用例:围绕着软件需求文档来进行设计测试用例 测试用例:本质上是一种集合&#xff0c;是为了实施测试而向被测试系统发出的一组集合&#xff0c;实施测试集合&#xff0c;这个集合的操作者设计者就是测试人员&#xff0c;这组集合的内容包括:测试环境&#xff0c;操作步骤&a…

【JavaScript】用echarts绘制饼图

&#x1f64b;‍ 哈喽大家好&#xff0c;本次是JavaScript专栏echarts板块第一期 ⭐本期内容&#xff1a;用echarts绘制饼图 &#x1f3c6;系列专栏&#xff1a;JavaScript &#x1f44d;一起学习&#xff0c;一起加油&#xff01; 文章目录前言效果图思路准备一个dom基于准备好…

网络安全对避免勒索软件侵害的5个原因

近几年来&#xff0c;勒索病毒已成为全球最热门的关键字之一&#xff0c;已造成了及其严重的经济损失。许多企业意识到这种情况&#xff0c;并试图集中精力保护自己免受这类威胁。在这里本人结合案例分享出5个原因&#xff0c;以让更多企业避免勒索软件的侵害。 原因1.勒索软…

【C++】模拟实现STL容器:list

目录 一、list的介绍 二、list的排序 三、迭代器 1、list的迭代器失效问题 2、迭代器的功能分类 3、list迭代器的模拟实现 3.1普通迭代器 3.2const迭代器 4、迭代器价值 5、迭代器operator->的重载 四、模拟实现时遇到的困惑及注意点 1、调用拷贝构造时&#xf…

Spring Cloud Gateway核心过滤器之请求限流详解

环境&#xff1a;SpringBoot2.4.13 Spring Cloud Gateway3.0.1 概述 RequestRateLimiter GatewayFilter工厂使用一个RateLimiter实现来确定当前请求是否允许继续。如果不是&#xff0c;返回HTTP 429 - Too Many Requests(默认情况下)的状态。 该过滤器接受一个可选的keyReso…

基于51单片机的贪吃蛇游戏设计

1绪 论 1.1本课题研究的背景及意义 随着当今社会的发展&#xff0c;人们的生活节奏变得越来越快&#xff0c;人们开始逐渐的融入全球化的世界。人们已经不再局限于一小块天地&#xff0c;加班&#xff0c;出差已经占据了现代人生活的绝大部分。这个时候&#xff0c;一款简单易携…

ChatGPT 体验和思考

一、体验 1、辅助写代码 2、检查代码&#xff08;遗憾的是&#xff0c;不一定是对的&#xff09; 3、分析代码 4、帮你了解/入门一项陌生的技术 小结&#xff1a; AI 会慢慢成为程序员的得力帮手&#xff0c;但目前来看&#xff0c;似乎还是不够成熟。 当然&#xff0c;大多…

《软件工程》2013年期末试卷

北京信息科技大学《软件工程》2013年期末试卷