HTML + CSS 实现画图板

作者: 辽A丶孙悟空 | 来源:发表于2020-02-26 12:31 被阅读0次

HTML + CSS 实现画图板
60s倒计时
CSS布局
记环形进度条（静态，非动态从0变到100%，css3实现）
js笔记十之for循环练习
CSS实现浮动阴影效果
下拉菜单的显示与隐藏
Front-web 启示录
tab切换样式实现
Swiper横向循环焦点图片展示

背景介绍

基本介绍
数位画图板：简称数位板、画图板、绘图板、绘画板、手绘板等等，是计算机输入设备的一种，数位画图板同键盘、鼠标、手写板一样都是计算机输入设备。数位画图板是专门针对电脑插画设计为研发的产品，数位画图板作为一种绘画设计电脑输入工具，是鼠标和键盘等输入工具的有益补充，其应用也会越来越普及

类别
$\color{red}{数位画图板：}$
数位画图板通常是由一块板子和一支压感笔组成，就像画家的画板和画笔，只是这个是数位产品，需要连接电脑结合软件使用。
数位画图板可以让你找回拿着笔在纸上画画的感觉，它可以模拟各种各样的画家的画笔，例如模拟最常见的毛笔，当我们用力的时候毛笔能画很粗的线条，当我们用力很轻的时候，它可以画出很细很淡的线条，它可以模拟喷枪，当你用力一些的时候它能喷出更多的墨和更大的范围，而且还能根据你的笔倾斜的角度，喷出扇形等等的效果...除了模拟传统的各种画笔效果外，它还可以利用电脑的优势，作出使用传统工具无法实现的效果，例如根据压力大小进行图案的贴图绘画，你只需要轻轻几笔就能很容易绘出一片开满大小形状各异的鲜花的芳草地...
数位画图板的主要参数有感应技术、压感级数、书写方式、个性化造型以及识别率，其中压感级数是关键参数。不同压感级数不同下笔力度不一样笔刷等信息通过数位画图板和数位笔反馈给计算机，从而形成粗细不同的笔触效果。画出不同效果的作品。数位画图板作为一种硬件输入工具，结合Painter、Photoshop等绘图软件，可以创作出各种风格的作品：油画、水彩画、素描、聚丙烯... 要知道，用数位扳和压感笔，结合Painter、Photoshop软件就能模拟出多种笔触。
$\color{red}{系统画图板：}$
Windows系统自带的画图板简单灵巧，深得Windows用户的喜爱，其占用资源少、操作简单、功能齐全等特点为用户的小型图形开发工作带来了很多便利。为此，也出现了很多利用VC等可视化开发工具开发的模仿Windows的画图板。本章完全利用C语言开发了一个画图板，该画图板具有画图、调整图形大小与方位、保存与打开文件等基本的画图板功能。

预备知识

HTML（超文本标记语言）
知识点还没掌握的小伙伴可以简单学习一下：HTML基础知识 - 笔记

CSS（层叠样式表）
知识点还没掌握的小伙伴可以简单学习一下：CSS基础知识 - 笔记

JavaScript
知识点还没掌握的小伙伴可以简单学习一下：JavaScript基础知识 - 笔记

成果展示

乱画一：

乱画二：

乱画三：

代码如下：

HTML代码如下

<!DOCTYPE html>
<html>
  <head> 
      <meta charset="utf-8" />
      <title></title>
      <link rel="stylesheet" type="text/css" href="css/index.css"/>       
  </head>
  <body>
      <div class="container"></div>
      
      <script>
          var getContainer = document.getElementsByClassName('container')[0];
          var createDiv = '';
          for(var i = 0;i < 2006;i++){
              createDiv += '<div class=\'box\'></div>'
          }
          getContainer.innerHTML = createDiv;
      </script>
  </body>
</html>

CSS代码如下

*{
  margin: 0px;
  padding: 0px;
}
.container{
  width: 100%;
  height: 816px;
  background-color: #111;
}
.container .box{
  width: 24px;
  height: 24px;
  border: 1px solid rgba(0,0,0,.2);
  box-sizing: border-box;
  float: left;
  position: relative;
}
.container .box::before{
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  background: #1d1d1d;
  box-shadow: 0 1px 4px #000;
  transition: 20s ease-in-out;
}
.container .box:hover::before{
  transition: 0s ease-in-out;
}
.container .box:nth-child(9n+1):hover::before{
  background: #f00;
  box-shadow: 0 0 3px #f00,0 0 10px #f00;
}
.container .box:nth-child(9n+2):hover::before{
  background: #0f0;
  box-shadow: 0 0 3px #0f0,0 0 10px #0f0;
}
.container .box:nth-child(9n+3):hover::before{
  background: #00f;
  box-shadow: 0 0 3px #00f,0 0 10px #00f;
}
.container .box:nth-child(9n+4):hover::before{
  background: #ff0;
  box-shadow: 0 0 3px #ff0,0 0 10px #ff0;
}
.container .box:nth-child(9n+5):hover::before{
  background: #0ff;
  box-shadow: 0 0 3px #0ff,0 0 10px #0ff;
}
.container .box:nth-child(9n+6):hover::before{
  background: #f0f;
  box-shadow: 0 0 3px #f0f,0 0 10px #f0f;
}
.container .box:nth-child(9n+7):hover::before{
  background: #00ffad;
  box-shadow: 0 0 3px #00ffad,0 0 10px #00ffad;
}
.container .box:nth-child(9n+8):hover::before{
  background: #e91e63;
  box-shadow: 0 0 3px #e91e63,0 0 10px #e91e63;
}
.container .box:nth-child(9n+9):hover::before{
  background: #f45510;
  box-shadow: 0 0 3px #f45510,0 0 10px #f45510;
}