有没有只让代码在电脑端生效的标签？

来源：蜘蛛抓取(WebSpider) 时间：2022-06-22 15:36 标签： 网站首页HTML代码的标签

2搬了其他博主的操作方法,以贴上路径.

场景一:Anconda环境基本操作

场景三:yolo v5训练自己的数据集

场景一:Anconda环境基本操作

2:创建使用自己的虚拟环境

# 打印保存的结果到哪了 # 设置优化器列表,也就是将模型分为3组 , (weight , bias ,其他所有参数) 进行优化 # Scheduler 设置学习率衰减 ,这里为余弦退火方式进行衰减 # tqdm 创建进度条,方便训练时信息的展示 cfg : 存储模型结构的配置文件 默认是 '' noval : 不进行验证,默认是False ,也就是一般不指定这个参数的话 会进行验证 ,不过验证发生在最后一个epoch resume : 断点训练(从上次打断训练的结果接着训练) 默认是 False cache : 是否提前缓存图片到内存,以加快训练速度 默认是 False patience : 训练次数不在提升性能超过指定次数,提前停止训练 默认是100 name ： 默认是 exp 也就是会在val文件夹下创建exp文件夹来存放结果

写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况：

不管容器有多大，只要将img的宽高设置成100%（这里的100%是相对于父级宽高而言）就能自适应容器大小。

那是不是就这这么简单完事儿了呢？如果你不介意图片被放大后可能出现失真的话也的确是这样就ok了。 

假如你介意 图片放大后会失真，我们可以改进上面的代码，只需要将img的样式简单修改.

max-width:100%和width:100%的区别在于,max-width是相对于img自身的尺寸而言的。意思是图片最大宽度为自身尺寸的宽，在这里就是100px。而width的100%我们上面已经说过了是相对于父级宽度的，所以为了不让图片被放大后失真我们可以设置img的最大宽度为自身尺寸大小，更通俗的讲就是只允许缩小不允许放大img。

具体情况中是选择width:100%还是max-width:100%还是依据个人的需求而定，另外在响应式设计中这个问题稍微会复杂一点。

图片适应手机端  要控制的是装图片的容器宽度

将以上标签加入之后保存，再用手机打开即是自适应网页了。

这篇文章主要介绍了手把手教你实现一个canvas智绘画板的方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  • 支持PC端和移动端在线绘画功能
  • 实现任意选择画笔颜色、调整画笔粗细以及橡皮檫擦除等绘画功能
  • 实现在线画板的本地保存功能

 二、项目效果展示

看完上面的预览图和体验过 智绘画板 觉得还可以的，记得点个赞哦，不管你是否十分激动，反正我是挺激动的，毕竟自己实现出现的项目效果，挺自豪的，说了一堆废话，下面就可以动起手来敲代码，实现自己想要的效果！！！

注：下面实现项目效果主要是关于JavaScript方面的，下面仅仅是提供 实现思路的代码 ， 并非全部代码 。

三、一步步实现项目效果

通过 用例图 ，我们知道用户进入我们这个网站有哪些功能？

  • 使用橡皮檫擦除不想要的部分
  • 将自己画的东西保存成图片
  • 兼容移动端（支持触摸）

（二）进行HTML布局

我书写html的同时，引入了css文件和js文件

（三）用CSS美化界面

css代码可以根据个人习惯进行美化界面，所以这里就不写css的代码了，大家可以直接看 项目代码 或者从开发者工具中审查元素观看。如果有问题可以私聊我，我觉得问题不大。

（四）使用JS实现项目的具体功能

首先，准备个容器,也就是画板了，前面的html已经书写好这个容器，这里纯属是废话。

我打算把画板做成全屏的，所以接下来设置一下 canvas 的宽高

由于部分IE不支持 canvas ，如果要兼容IE，我们可以创建一个 canvas ，然后使用 excanvas 初始化，针对IE加上exCanvas.js，这里我们明确不考虑IE。

但是我在电脑上对浏览器的窗口进行改变，画板不会自适应的放缩。解决办法： 

 // 当执行这个函数的时候，会先设置canvas的宽高
 
 // 在窗口大小改变之后,就会触发resize事件，重新设置canvas的宽高

实现思路：监听鼠标事件， 用 drawLine() 方法把记录的数据画出来。

  • 当鼠标按下时（ mousedown ），把 painting 设为 true ，表示正在画，鼠标没松开。把鼠标点记录下来。
  • 当按下鼠标的时候，鼠标移动（ mousemove ）就 把点记录 下来并画出来。 如果鼠标移动过快，浏览器跟不上绘画速度，点与点之间会出现间隙，所以我们需要将画出的点用线连起来（ lineTo() ）。

注： drawCircle 这个方法其实可以不用书写，这个只是为了让大家能够理解开始点击的位置在哪里？ 

 // 定义一个变量初始化画笔状态
 // 记录画笔最后一次的位置
 // 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
 // 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），
 // 通过填充路径的内容区域生成实心的图形
 // 闭合路径之后图形绘制命令又重新指向到上下文中。
 // 设置线条末端样式。
 // 设定线条与线条间接合处的样式
 // lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线
 // 通过线条来绘制图形轮廓
  1. 监听橡皮擦 click 事件，点击橡皮擦，改变橡皮擦状态， eraserEnabled = true ，并且切换class，实现 被激活 的效果。

但是我发现canvas的API中，可以清除像素的就是clearRect方法，但是clearRect方法的清除区域矩形，毕竟大部分人的习惯中的橡皮擦都是圆形的，所以就引入了剪辑区域这个强大的功能，也就是clip方法。下面的代码是使用 context.clearRect() 实现了 橡皮檫。请看踩坑部分，了解如何更好的实现橡皮檫。 

 // ... 代表省略了之前写的代码

点击清空按钮清空canvas画布。

5.实现保存成图片功能

  • 在页面里创建并插入一个a标签
  • 点击保存按钮，a标签触发click事件

6.实现改变背景颜色的功能

  1. 给每一个class为bgcolor-item的标签添加点击事件，当点击事件触发时，改变背景颜色。
  2. 点击设置背景颜色的div之外的地方，实现隐藏那个div。 
// 实现了切换背景颜色

7.实现改变画笔粗细的功能

  1. 实现让设置画笔的属性的对话框出现。
  2. 当input=range的元素发生改变的时候，获取到的值赋值给lWidth。

8.实现改变画笔颜色的功能

实现思路跟 改变画板背景颜色 的思路类似。

9.实现改变撤销和重做的功能

  1. 绘制新图像：执行新的绘制操作时，删除当前位置之后的数组记录，然后添加新的快照。 
 // 添加新的绘制到历史记录

 问题1：在电脑上对浏览器的窗口进行改变，画板不会自适应

onresize响应事件处理中，获取到的页面尺寸参数是变更后的参数 。

当窗口大小发生改变之后，重新设置canvas的宽高，简单来说，就是窗口改变之后，给canvas.width和canvas.height重新赋值。 

 // 当执行这个函数的时候，会先设置canvas的宽高
 
 // 在窗口大小改变之后,就会触发resize事件，重新设置canvas的宽高

问题2：当绘制线条宽度比较小的时候还好,一旦比较粗就会出现问题

解决办法：看一下文档，得出方法，只需要简单修改一下 绘制线条的代码 就行 

 // 设置线条末端样式。
 // 设定线条与线条间接合处的样式

问题3：如何实现圆形的橡皮檫？

canvas的API中，可以清除像素的就是clearRect方法，但是clearRect方法的清除区域矩形，毕竟大部分人的习惯中的橡皮擦都是圆形的，所以就引入了剪辑区域这个强大的功能，也就是clip方法。用法很简单：

上面那段代码就实现了圆形区域的擦除，也就是先实现一个圆形路径，然后把这个路径作为剪辑区域，再清除像素就行了。有个注意点就是需要先保存绘图环境，清除完像素后要重置绘图环境，如果不重置的话以后的绘图都是会被限制在那个剪辑区域中。

问题4：如何兼容移动端？

因为浏览器初始会将页面现在手机端显示时进行缩放，因此我们可以在meta标签中设置meta viewport属性，告诉浏览器不将页面进行缩放，页面宽度=用户设备屏幕宽度

2.在移动端几乎使用的都是touch事件，与PC端不同

由于移动端是触摸事件，所以要用到H5的属性touchstart/touchmove/touchend,但是PC端只支持鼠标事件，所以要进行特性检测。

问题5：出现一个问题就是清空之后，重新画，然后出现原来的画的东西

这个嘛，问题不大，只不过是我漏写context.beginPath(); ，也花了一点时间在上面解决bug，让我想起“代码千万行,注释第一行;编程不规范,同事两行泪 ”，还是按照文档操作规范操作好，真香！！！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

我要回帖

更多关于 网站首页HTML代码的标签 的文章

 

随机推荐