zoukankan      html  css  js  c++  java
  • (五)实现画笔和橡皮的功能

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>鼠标画线和方块移动</title>
    </head>
    <style>
    * {margin: 0;padding: 0;}
    body {background-color: #000;}
    #c1 {background-color: #fff}
    .active {background-color: red;color: #fff}
    </style>
    <body>
    <canvas id="c1" width="400" height="400"></canvas>
    <input class="active" type="button" value="画笔">
    <input type="button" value="橡皮擦">
    <script>
    var oC = document.getElementById('c1');
    var aInput = document.getElementsByTagName("input");
    var num = 0;
    for(var i=0;i<aInput.length;i++) {
    aInput[i].index = i;
    aInput[i].onclick = function () {
    for(var j= 0;j<aInput.length;j++) {
    aInput[j].className = "";
    }
    this.className = "active";
    num = this.index;
    }
    }
    var ctx = oC.getContext("2d");
    oC.onmousedown = function(ev) {
    var x = ev.pageX - oC.offsetLeft;
    var y = ev.pageY - oC.offsetTop;
    ctx.beginPath();
    ctx.moveTo(x,y);
    oC.onmousemove = function(ev) {
    var x = ev.pageX - oC.offsetLeft;
    var y = ev.pageY - oC.offsetTop;
    if(num ==0) {
    ctx.lineTo(x,y);
    ctx.stroke();
    } else if(num ==1) {
    ctx.clearRect(x,y,20,20);
    }
    };
    oC.onmouseup = function (ev) {
    oC.onmousemove = null;
    oC.onmouseup = null;
    ctx.closePath();
    };
    return false;
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    vector容器(一)
    螺旋数组实现
    zigzag数组实现
    HDU 1496
    HDU 1381 Crazy Search
    什么叫软核,固核,硬核?
    “杜拉拉思维模式”之六:小组面试提升术
    硬件工程师电路设计必须紧记的十大要点
    面试的“群殴”宝典
    三段式状态机 [CPLD/FPGA]
  • 原文地址:https://www.cnblogs.com/bgwhite/p/9406809.html
Copyright © 2011-2022 走看看