zoukankan      html  css  js  c++  java
  • canvas 画板

    这周学习了canvas 

    canvas是一个嵌入式元素  类似 嵌入了一个画布 

    这次得画板 就是通过鼠标可以在画布上进行 画图 

    并且可以改变它的线条得粗细  颜色 

    清除画板 三个小功能

    注意点 

    获取鼠标当前得位置 

    当鼠标点击得时候  我们需要得到 鼠标的位置 并且在画板相应的

    位置留下笔记  event.clientX 得到的时鼠标位与页面的位置  

    offsetLeft 得到的时canvas元素位于 页面的 位置  

    两者相减 就得到了 鼠标在canvas元素中的位置 

    鼠标抬起 得时候需要清除 事件效果

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8     <title>画布
     9 
    10     </title>
    11     <style>
    12         #myCan {
    13             border: 1px solid;
    14         }
    15 
    16         .color {
    17             display: inline-block;
    18             width: 25px;
    19             height: 25px;
    20             margin: 0 5px;
    21         }
    22     </style>
    23 </head>
    24 
    25 <body>
    26     <canvas id="myCan" width="500" height="500"></canvas>
    27     <div>
    28         <button onclick="clearCanvas()" style="float:left;">清除画布</button>
    29         <div class="color" style="background-color: red;" onclick="changeColor('red')"></div>
    30         <div class="color" style="background-color: blue;" onclick="changeColor('blue')"></div>
    31         <div class="color" style="background-color: black;" onclick="changeColor('black')"></div>
    32         <div class="color" style="background-color: green;" onclick="changeColor('green')"></div>
    33         <div class="color" style="background-color: yellow;" onclick="changeColor('yellow')"></div>
    34         <div class="color" style="background-color: white;" onclick="changeColor('white')"></div>
    35         <input type="range" id="range" style="margin-left: 10px;" min="1" max="10" onchange="changeWidth(this.value)">
    36     </div>
    37     <script>
    38         let c = document.getElementById("myCan");
    39         // console.log(c);
    40 
    41         var pen = c.getContext('2d');
    42         console.log(pen);
    43         let color = document.getElementsByClassName("color");
    44         pen.lineWidth = 5;
    45 
    46         c.onmousedown = function (e) {
    47             var ev = e || window.event;
    48 
    49             pen.beginPath();
    50             console.log("1");
    51             pen.moveTo(ev.clientX - c.offsetLeft, ev.clientY - c.offsetTop);
    52             document.onmousemove = function () {
    53                 var ev = ev || window.event;
    54                 pen.lineTo(ev.clientX - c.offsetLeft, ev.clientY - c.offsetTop);
    55                 pen.stroke();
    56                 // console.log("1");
    57             };
    58         };
    59         pen.closePath(); //end 绘画路径
    60 
    61         c.onmouseup = function () {
    62             document.onmousedown = null;
    63             document.onmousemove = null;
    64         }
    65 
    66         let clearCanvas = function () {
    67             // c.clearRect(0,0,c.width,c.height);
    68             pen.clearRect(0, 0, 500, 500);
    69         }
    70         let changeColor = function (str) {
    71             pen.strokeStyle = str;
    72             for (let i = 0; i < color.length; i++) {
    73                 color[i].style.boxShadow = "";
    74             }
    75             event.target.style.boxShadow = "0 0 8px black";
    76         }
    77 
    78         function changeWidth(i) {
    79             pen.lineWidth = i;
    80             console.log(pen.lineWidth);
    81         }
    82     </script>
    83 </body>
    84 
    85 </html>
  • 相关阅读:
    GridView使用CommandField删除列实现删除时提示确认框
    Web开发-表单验证
    GridView使用CommandField删除列实现删除时提示确认框
    c#中的delegate(委托)和event(事件)
    Asp.Net中的三种分页方式
    java数组,遍历数组
    Java循环结构
    java选择结构
    易混运算符
    局部变量与成员变量
  • 原文地址:https://www.cnblogs.com/ATnTention/p/11503101.html
Copyright © 2011-2022 走看看