JS实现简易画图工具

【Canvas】画布

Canvas为HTML5中新加入的标签， JS 可在上面进行绘画，Canvas一个矩形的单元。Canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

绘制图形的步骤:

1、获取画布节点。

2、获取上下文(即在这个区域进行绘画)getContext。

3、使用 JavaScript 来进行绘制。

****************************************************************下面用JS实现简易画图工具*******************************************************************************

【业务逻辑】

1、简易画布具有:选择划线粗细、划线颜色、以及清除画板等功能

2、划线通过鼠标按下,并且移动鼠标进行划线,鼠标抬起划线停止,故而必须清楚需要三个鼠标事件。

3、鼠标按下事件:当鼠标按下就通过moveTo获取鼠标的位置,这个位置就是你划线的起点。

4、鼠标移动事件:鼠标移动时通过lineTo进行划线。

5、鼠标抬起事件:鼠标抬起时就通过removeEventListener阻止鼠标移动事件。

6、通过clearRect进行清除画板。

7、颜色以及粗细通过value获取

【HTML代码】

<h1>简易画图工具</h1>

    <div class="container">

        <canvas width="800" height="500"></canvas>

    </div>

    <input type="button" value="清除画布" class="qingChu">

    <input type="color" class="yanSe">

    <input type="range" min="1" max="10" class="chuxi">

【CSS代码】

div{width: 800px;height: 500px;margin: auto;border: 1px solid black;}

h1{margin-left: 650px;}

input{ margin-right: 10px;}

input:nth-of-type(1){margin-left: 360px;}

【JS代码】

//获取画布节点。

let canEle = document.getElementsByTagName("canvas")[0];

console.log(canEle.offsetWidth, canEle.offsetHeight);

//2、获取上下文(即在这个区域进行绘画)Context

let pen = canEle.getContext("2d");

let colEle = document.getElementsByClassName("yanSe")[0];

let qcEle = document.getElementsByClassName("qingChu")[0];

let chuxiEle = document.getElementsByClassName("chuxi")[0];

//获取用户输入

console.log(colEle);

canEle.addEventListener("mousedown", function (e) {

    let event1 = e || window.event1;

    //获取鼠标位置作为起始位置

    pen.moveTo(event1.clientX - canEle.offsetLeft, event1.clientY - canEle.offsetTop);

    pen.beginPath();

    //添加鼠标移动事件

    canEle.addEventListener("mousemove", hua);

    function hua(e) {

        let event = e || window.event;

        pen.strokeStyle = colEle.value;

        pen.lineWidth = chuxiEle.value;

        pen.lineTo(event.offsetX, event.offsetY);

        console.log(pen.lineWidth);

        pen.stroke();

    }

    canEle.addEventListener("mouseup", function () {

        canEle.removeEventListener("mousemove", hua);

    })

})

qcEle.addEventListener("click", qingchu);

function qingchu() {

    pen.clearRect(0, 0, canEle.offsetWidth, canEle.offsetHeight);

}