canvas畫板，Html5新標簽Canvas制作炫酷的畫板功能

在html5中，新增了很多實用的標簽，今天為大家介紹的是html5新增標簽，標簽是使用來規定一個圖形容器（畫布），然后通過腳本（ JavaScript等）來繪制圖形，

今天給大家做一個類似于電腦畫圖板的功能，我們先來看看效果圖：

好了，我們開始上代碼

HTML

<div id="box">
    <canvas id="canvas" width="800" height="600"></canvas>
        <dib id="tool">
            <div id="pen_color">
                <p>選中顏色</p>
                <div class="btn">
                <input type="color" id="color" value="#000000" onchange="colorchange()">
                <input type="text" class="num" value="#000000" readonly='readonly' />
            </div>
        </div>
        <div id="color_thickness">
            <p>畫筆粗細</p>
            <div class="btn">
                <input type="range" id="range" min="1" max="10" value="1" onchange="change()" />
                <input type="text" class="num" value="1" readonly='readonly' />
            </div>
        </div>
        <div id="color_shape">
            <p>畫筆樣式</p>
            <ul>
                <li>
                    <img src="images/0.png">
                </li>
                <li>
                    <img src="images/1.png">
                </li>
                <li>
                    <img src="images/2.png">
                </li>
            </ul>
        </div>
        <div id="operation">
            橡皮擦
        </div>
    </dib>
</div>

CSS

* {
margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

#box {
    width: 100%;
    height: 100%;
    background: url(images/pic.jpg) no-repeat;
    background-size: 100% 100%;
}

canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: #009688 1px solid;
    background-color: #F9F4F1;
}

#tool {
    width: 800px;
    height: 60px;
    background-color: red;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 300px);
    display: flex;
    align-items: center;

}

#tool>div {
    width: 25%;
    height: 100%;
    background: #009688;
    text-align: center;
}

.num {
    width: 60px;
    height: 20px;
    outline: none;
    background-color: none;
}

.btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
}

p {
    line-height: 20px;
}

ul {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-around;
}

ul li {
    flex: 1;
    height: 100%;
}

#color_shape img {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

JS

//獲取畫布以及初始化畫布的屬性
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");
    // 獲取畫筆顏色和畫筆粗細的顯示框
    let num = document.querySelectorAll(".num");
    // 獲取顏色選擇器
    let Color = document.querySelector("#color")

    function colorchange() {
        // 把選擇器上面的顏色賦給畫筆以及顯示框
        num[0].value =https://www.cnblogs.com/xxmx/p/ Color.value;
        ctx.strokeStyle = num[0].value; //畫筆的顏色
    }

    // 獲取畫筆粗細的滾動條
    let Range = document.querySelector("#range");

    function change() {
        // 把畫筆粗細選擇器上的值賦給畫筆以及顯示框
        num[1].value =https://www.cnblogs.com/xxmx/p/ Range.value;
        ctx.lineWidth = num[1].value; //畫筆的線寬也就是畫筆的粗細
    }
    //是否開始繪制
    let isDraw = false;
    //滑鼠按下去
    // 獲取畫筆的樣式
    let pen = null;
    let oLi = document.querySelectorAll("li");
    for (let i = 0; i < oLi.length; i++) {
        oLi[i].onclick = function() {
            pen = canvas.style.cursor;
            pen = "url(./" + i + ".png),auto";
        }
    }

    canvas.onmousedown = function(event) {
        //滑鼠按下去就說明開始繪圖了，true
        isDraw = true;
        //起始一條路徑，或重置當前路徑，
        ctx.beginPath();
        this.style.cursor = pen;
    }


    //滑鼠按移動
    canvas.onmousemove = function(event) {
        // txt.innerHTML = "滑鼠移動    X："+event.offsetX+"   Y:"+event.offsetY;
        //isDraw為true說明滑鼠按下去了開始允許繪圖
        //isDraw為false說明滑鼠抬起來，繪圖結束，
        if (isDraw) {
            //滑鼠在畫布上x軸的位置，因為這個點擊事件是在畫布上，
            //所以指的是在畫布上的滑鼠位置，不會顯示滑鼠離視窗的位置，
            let x = event.offsetX;
            //滑鼠在畫布上y軸的距離，
            let y = event.offsetY;
            //開始畫線，每次滑鼠移動x，y都會邊， 所以滑鼠移動到那里坐標就傳進去，在那個位置就會畫個點（無數的點連起來就是一條線）
            ctx.lineTo(x, y)
            //繪制已定義的路徑，
            ctx.stroke();
        }
    }
    //滑鼠抬起來
    document.onmouseup = function() {
        //滑鼠抬起來了，繪圖結束
        isDraw = false;
        canvas.style.cursor = "";
    }

功能展示

好了全部的代碼就這樣完成了，當你熟悉了canvas后也可以做的更加炫酷

 點我看效果

標籤：JavaScript

上一篇：列舉background屬性的8個屬性值(面試題)

下一篇：DOM級別