• 使用canvas做了一个最简单的网页版画板，5分钟学会

    画板实现的效果：可以切换画笔的粗细，颜色，还可以使用橡皮擦，还可以清除画布，然后将画的内容保存下载成一张图片：

    具体用到的canvas功能有：画笔的粗细调整lineWidth，开始一个新的画笔路径beginPath，结束一个画笔路径closePath，这个可以保证不影响之前画的效果，重新开始一个画笔路径。 还有橡皮擦使用的ctx.globalCompositeOperation = 'destination-out'属性，清空画布使用的：ctx.clearRect(0, 0, canvas.width, canvas.height)，保存图片使用的是let url = canvas.toDataURL('image/png')。

    完整的代码如下：

    1. html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8" />
    5.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.         <title>像素操作title>
    7.         <style>
    8.             .active {
    9.                 background-color: #f2a1a1;
    10.             }
    11.         style>
    12.     head>
    13.     <body>
    14.         <div>创建一个画布，可以使用画笔随意画画div>
    15.         <div style="width: 800px; margin-top: 6px">
    16.             <button class="bold">粗线条button>
    17.             <button class="thin">细线条button>
    18.             <input id="color" type="color" />
    19.             <button class="del">橡皮擦button>
    20.             <button class="clear">清空画布button>
    21.             <button class="save">保存图片button>
    22.             <hr />
    23.             <canvas id="myCanvas" width="800" height="600">canvas>
    24.         div>
    25.         <script>
    26.             // 获取画布
    27.             const canvas = document.getElementById('myCanvas')
    28.             // 获取画笔
    29.             const ctx = canvas.getContext('2d')
    30.             // 让画笔的拐弯处更加圆润，没有锯齿感
    31.             ctx.lineCap = 'round'
    32.             ctx.lineJoin = 'round'
    33.             // 获取控制按钮
    34.             const bold = document.querySelector('.bold')
    35.             const thin = document.querySelector('.thin')
    36.             const color = document.querySelector('#color')
    37.             const del = document.querySelector('.del')
    38.             const clear = document.querySelector('.clear')
    39.             const save = document.querySelector('.save')
    40.             // 添加点击事件
    41.             bold.onclick = function () {
    42.                 ctx.lineWidth = 20
    43.                 bold.classList.add('active')
    44.                 thin.classList.remove('active')
    45.                 del.classList.remove('active')
    46.                 clear.classList.remove('active')
    47.                 save.classList.remove('active')
    48.             }
    49.             thin.onclick = function () {
    50.                 ctx.lineWidth = 5
    51.                 thin.classList.add('active')
    52.                 bold.classList.remove('active')
    53.                 del.classList.remove('active')
    54.                 clear.classList.remove('active')
    55.                 save.classList.remove('active')
    56.             }
    57.             color.onchange = function (e) {
    58.                 console.log('颜色改变了:', e.target.value)
    59.                 ctx.strokeStyle = e.target.value
    60.             }
    61.             del.onclick = function () {
    62.                 console.log('橡皮擦')
    63.                 ctx.globalCompositeOperation = 'destination-out'
    64.                 ctx.lineWidth = 30
    65.                 del.classList.add('active')
    66.                 bold.classList.remove('active')
    67.                 thin.classList.remove('active')
    68.                 clear.classList.remove('active')
    69.                 save.classList.remove('active')
    70.             }
    71.  
    72.             clear.onclick = function () {
    73.                 console.log('清空画布')
    74.                 ctx.clearRect(0, 0, canvas.width, canvas.height)
    75.             }
    76.             // 保存图片
    77.             save.onclick = function () {
    78.                 console.log('保存图片')
    79.                 let url = canvas.toDataURL('image/png')
    80.                 let a = document.createElement('a')
    81.                 a.href = url
    82.                 a.download = 'canvas.png'
    83.                 a.click()
    84.             }
    85.  
    86.             // 监听画布画画事件
    87.             let mouseDown = false
    88.  
    89.             // 鼠标按下将变量设置为true
    90.             canvas.onmousedown = function (e) {
    91.                 ctx.beginPath()
    92.                 mouseDown = true
    93.                 ctx.moveTo(e.offsetX, e.offsetY)
    94.             }
    95.  
    96.             // 鼠标抬起将变量设置为false
    97.             canvas.onmouseup = function () {
    98.                 mouseDown = false
    99.                 ctx.closePath()
    100.                 ctx.globalCompositeOperation = 'source-over'
    101.             }
    102.  
    103.             canvas.onmouseleave = function () {
    104.                 mouseDown = false
    105.                 ctx.closePath()
    106.             }
    107.  
    108.             // 鼠标移动
    109.             canvas.onmousemove = function (e) {
    110.                 if (mouseDown) {
    111.                     console.log('鼠标移动')
    112.                     ctx.lineTo(e.offsetX, e.offsetY)
    113.                     ctx.stroke()
    114.                 }
    115.             }
    116.         script>
    117.     body>
    118. html>

  • 相关阅读:
    CompletableFuture 异步编排
    JUC06-读写锁ReentrantReadWriteLock
    大数据必学Java基础（九十六）：PreparedStatement完成CURD和批处理
    习题1.24
    [SpringBoot] AOP-AspectJ 切面技术
    《纳瓦尔宝典》和一个智者的对话的奇妙旅程
    Mybatis-动态 SQL详解
    面向对象-05-06-构造方法,标准的 javabean 类
    21.Hadoop在Windows环境下的下载安装配置超详细版
    3.1依赖注入
  • 原文地址：https://blog.csdn.net/weixin_44786530/article/details/134019265