明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

html5自己做一個類似windows的畫圖軟件的方法

發(fā)表時間：2023-12-28 來源：明輝站整理相關軟件相關文章人氣：

[摘要]這個繪圖工具，我還沒有做完，不過已經實現(xiàn)了總架構，以及常見的簡易圖形繪制功能：1，可以繪制直線，圓，矩形，正多邊形【已完成】2，填充顏色和描邊顏色的選擇【已完成】3，描邊和填充功能的選擇【已完成】后續(xù)版本：橡皮擦，坐標系，線形設置，箭頭，其他流程圖形，裁剪與調整圖形。。。。。終極目標：流程繪制軟件...
這個繪圖工具，我還沒有做完，不過已經實現(xiàn)了總架構，以及常見的簡易圖形繪制功能：

1，可以繪制直線，圓，矩形，正多邊形【已完成】

2，填充顏色和描邊顏色的選擇【已完成】

3，描邊和填充功能的選擇【已完成】

后續(xù)版本：

橡皮擦，坐標系，線形設置，箭頭，其他流程圖形，裁剪與調整圖形。。。。。

終極目標：

流程繪制軟件

我是之前看見一位朋友在我的博客中留言說：

html5自己做一個類似windows的畫圖軟件的方法

非常感謝這個朋友，今天終于抽出時間完成非常非常小的雛形!

完整的雛形代碼，請自行打開，復制到本地測試.

html5自己做一個類似windows的畫圖軟件的方法html5自己做一個類似windows的畫圖軟件的方法


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>windows簡易畫圖工具 - by ghostwu</title>
</head>

<body>
    <div class="paint">
        <div class="paint-header">
            <ul>
                <li class="active">形狀</li>
                <li>顏色</li>
                <li>繪制類型</li>
                <li>線條寬度</li>
                <li>橡皮擦</li>
            </ul>
        </div>
        <div class="paint-body">
            <div class="siderbar">
                <div class="item active" data-type="paint-shape">
                    <ul>
                        <li class="active" data-role="line">線條</li>
                        <li data-role="circle">圓形</li>
                        <li data-role="rect">矩形</li>
                        <li data-role="polygon">正多邊形</li>
                        <li data-role="arrow">箭頭</li>
                    </ul>
                </div>
                <div class="item" data-type="paint-color">
                    <ul>
                        <li data-role="strokeStyle">
                            <input type="color" data-role="strokeStyle">
                        </li>
                        <li data-role="fillStyle">
                            <input type="color" data-role="fillStyle">
                        </li>
                    </ul>
                </div>
                <div class="item" data-type="paint-type">
                    <ul>
                        <li data-role="stroke">描邊</li>
                        <li data-role="fill">填充</li>
                    </ul>
                </div>
                <div class="item" data-type="paint-line">
                    <ul>
                        <li data-role="1">小號</li>
                        <li data-role="4">中號</li>
                        <li data-role="7">大號</li>
                        <li>
                            <input type="number" data-role="line-size" placeholder="請輸入數(shù)字">
                        </li>
                    </ul>
                </div>
                <div class="item" data-type="paint-erase">
                    <ul>
                        <li>
                            <input type="number" data-role="erase-size" placeholder="請輸入數(shù)字">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>// <![CDATA[
        var oPaintBody = document.querySelector( '.paint-body' );
        var oC = document.createElement( 'canvas' );
        oC.setAttribute( 'width', '830' );
        oC.setAttribute( 'height', '500' );
        oPaintBody.appendChild( oC );
        var aHeaderLi = document.querySelectorAll('.paint-header li'),
            aItem = document.querySelectorAll('.paint-body .item'),
            oCanvas = document.querySelector('.paint canvas'),
            oGc = oCanvas.getContext('2d'),
            cWidth = oCanvas.width, cHeight = oCanvas.height,
            curItem = aItem[0],
            aItemLi = curItem.querySelectorAll('li');

        for (let i = 0, len = aHeaderLi.length; i < len; i++) { //頭部選項卡切換功能
            aHeaderLi[i].onclick = function () {
                for (let j = 0; j < len; j++) {
                    aHeaderLi[j].classList.remove('active');
                    aItem[j].style.display = 'none';
                }
                aItem[i].style.display = "block";
                this.classList.add('active');
                curItem = aItem[i];
                aItemLi = curItem.querySelectorAll('li');
                activeItem(aItemLi);
            }
        }
        activeItem(aItemLi);
        var role = null;
        function activeItem(aItemLi) { //canvas左側選項卡切換功能
            for (let i = 0, len = aItemLi.length; i < len; i++) {
                aItemLi[i].onclick = function () {
                    checkPaintType(this); //繪制類型
                    for (let j = 0; j < len; j++) {
                        aItemLi[j].classList.remove('active');
                    }
                    this.classList.add('active');
                }
            }
        }

        function Shape(canvasObj, cxtObj, w, h) {
            this.oCanvas = canvasObj;
            this.oGc = cxtObj;
            this.oCanvas.width = w;
            this.oCanvas.height = h;
            this.fillStyle = '#000';
            this.storkeStyle = '#000';
            this.lineWidth = 1;
            this.drawType = 'line';
            this.paintType = 'stroke';
            this.nums = 6; //正多邊形的邊數(shù)
        }

        Shape.prototype = {
            init: function () {
                this.oGc.fillStyle = this.fillStyle;
                this.oGc.strokeStyle = this.strokeStyle;
                this.oGc.lineWidth = this.lineWidth;
            },
            draw: function () {
                var _this = this;
                this.oCanvas.onmousedown = function (ev) {
                    _this.init();
                    var oEvent = ev    event,
                        startX = oEvent.clientX - _this.oCanvas.offsetLeft,
                        startY = oEvent.clientY - _this.oCanvas.offsetTop;
                    _this.oCanvas.onmousemove = function (ev) {
                        _this.oGc.clearRect(0, 0, _this.oCanvas.width, _this.oCanvas.height);
                        var oEvent = ev    event,
                            endX = oEvent.clientX - _this.oCanvas.offsetLeft,
                            endY = oEvent.clientY - _this.oCanvas.offsetTop;
                        _this[_this.drawType](startX, startY, endX, endY);
                    };
                    _this.oCanvas.onmouseup = function () {
                        _this.oCanvas.onmousemove = null;
                        _this.oCanvas.onmouseup = null;
                    }
                }
            },
            line: function (x1, y1, x2, y2) {
                this.oGc.beginPath();
                this.oGc.moveTo(x1, y1);
                this.oGc.lineTo(x2, y2);
                this.oGc.closePath();
                this.oGc.stroke();
            },
            circle: function (x1, y1, x2, y2) {
                this.oGc.beginPath();
                var r = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
                this.oGc.arc(x1, y1, r, 0, 2 * Math.PI, false);
                this.oGc.closePath();
                this.oGc[this.paintType]();
            },
            rect: function (x1, y1, x2, y2) {
                this.oGc.beginPath();
                this.oGc.rect(x1, y1, x2 - x1, y2 - y1);
                this.oGc[this.paintType]();
            },
            polygon: function (x1, y1, x2, y2) {
                var angle = 360 / this.nums * Math.PI / 180;//邊對應的角的弧度
                var r = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
                this.oGc.beginPath();
                for (var i = 0; i < this.nums; i++) {
                    this.oGc.lineTo(x1 + r * Math.cos(angle * i), y1 + r * Math.sin(angle * i));
                }
                this.oGc.closePath();
                this.oGc[this.paintType]();
            }
        }

        var oShape = new Shape(oCanvas, oGc, cWidth, cHeight);
        function checkPaintType(liType) {
            var dataType = liType.parentNode.parentNode.dataset.type;
            var curType = liType.dataset.role;
            switch (dataType) {
                case 'paint-shape': //形狀
                    oShape.drawType = curType;
                    if (curType == 'polygon') {
                        oShape.nums = prompt("請輸入邊數(shù)", 6);
                    }
                    oShape.draw();
                    break;
                case 'paint-color': //繪制顏色
                    liType.children[0].onchange = function () {
                        oShape[this.dataset.role] = this.value;
                    }
                    oShape.draw();
                    break;
                case 'paint-type': //繪制類型
                    oShape.paintType = curType;
                    oShape.draw();
                    break;
            }
        }
// ]]></script>
    <style>
        .paint * {
            margin: 0;
            padding: 0;
        }

        .paint ul,
        .paint li {
            list-style: none;
        }

        .paint li:hover {
            cursor: pointer;
        }

        .paint {
            width: 980px;
            margin: 20px auto;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        .paint .paint-header ul {
            width: 980px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }

        .paint .paint-header li {
            float: left;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .paint li.active {
            box-shadow: #666 0px 1px 8px inset;
        }

        .paint .paint-body .siderbar {
            float: left;
            width: 150px;
            height: 500px;
        }

        .paint .paint-body .item {
            width: 150px;
            overflow: hidden;
            display: none;
            height: 500px;
            border-right: 1px solid #ccc;
        }

        .paint .paint-body canvas {
            float: right;
        }

        .paint .paint-body .item li {
            height: 40px;
            text-align: center;
            border-bottom: 1px solid #ccc;
            line-height: 40px;
        }

        .paint .paint-body .active {
            display: block;
        }
    </style>
</body>

關于流程設計，后期要做的功能，思路基本上已經有了，好了，圓規(guī)正傳，想要完成這個終極目標，完成一個畫圖工具應該就能接近目標了。先體驗下目前的簡易功能，下面是可以正常畫圖的，【需要你的瀏覽器支持canvas才可以額】
主要來講下目標的雛形架構：

1，圖形繪制部分，我封裝了一個類Shape

function Shape(canvasObj, cxtObj, w, h) {
        this.oCanvas = canvasObj;
        this.oGc = cxtObj;
        this.oCanvas.width = w;
        this.oCanvas.height = h;
        this.fillStyle = '#000';
        this.storkeStyle = '#000';
        this.lineWidth = 1;
        this.drawType = 'line';
        this.paintType = 'stroke';
        this.nums = 6; //正多邊形的邊數(shù)
    }

canvasObj: 就是canvas畫布對象

cxtObj: 就是上下文繪圖環(huán)境

w: canvas的寬度

h: canvas的高度

fillStyle: 填充顏色

strokeStyle: 描邊顏色

lineWidth: 線寬

drawType: 默認為畫直線

paintType: stroke/fill 兩種選擇（ 描邊/填充）

2，在原型對象上擴展一個公共方法draw用來繪制圖形

draw方法，主要獲取起始點坐標（startX, startY），以及終點坐標( endX, endY );

然后調用init方法來獲取繪制狀態(tài)，繪制具體的圖形靠下面這個關鍵方法：

_this[_this.drawType](startX, startY, endX, endY)

這個方法的drawType會根據(jù)界面的實時選擇，變換對應的繪制類型，如：

_this['line']( startX, startY, endX, endY )

調用的就是oShape對象中的line，畫直線的方法

Shape.prototype = {
        init: function () {
            this.oGc.fillStyle = this.fillStyle;
            this.oGc.strokeStyle = this.strokeStyle;
            this.oGc.lineWidth = this.lineWidth;
        },
        draw: function () {
            var _this = this;
            this.oCanvas.onmousedown = function ( ev ) {
                _this.init();
                var oEvent = ev    event,
                    startX = oEvent.clientX - _this.oCanvas.offsetLeft,
                    startY = oEvent.clientY - _this.oCanvas.offsetTop;
                _this.oCanvas.onmousemove = function ( ev ) {
                    _this.oGc.clearRect( 0, 0, _this.oCanvas.width, _this.oCanvas.height );
                    var oEvent = ev    event,
                        endX = oEvent.clientX - _this.oCanvas.offsetLeft,
                        endY = oEvent.clientY - _this.oCanvas.offsetTop;
                    _this[_this.drawType](startX, startY, endX, endY);
                };
                _this.oCanvas.onmouseup = function(){
                    _this.oCanvas.onmousemove = null;
                    _this.oCanvas.onmouseup = null;
                }
            }
        },
        line: function ( x1, y1, x2, y2 ) {
            this.oGc.beginPath();
            this.oGc.moveTo( x1, y1 );
            this.oGc.lineTo( x2, y2 );
            this.oGc.closePath();
            this.oGc.stroke();
        },
        circle : function( x1, y1, x2, y2 ){
            this.oGc.beginPath();
            var r = Math.sqrt( Math.pow( x2 - x1, 2 ) + Math.pow( y2 - y1, 2 ) );
            this.oGc.arc( x1, y1, r, 0, 2 * Math.PI, false );
            this.oGc.closePath();
            this.oGc[this.paintType]();
        },
        rect : function( x1, y1, x2, y2 ){
            this.oGc.beginPath();
            this.oGc.rect( x1, y1, x2 - x1, y2 - y1 );
            this.oGc[this.paintType]();
        },
        polygon : function( x1, y1, x2, y2 ){
            var angle = 360 / this.nums * Math.PI / 180;//邊對應的角的弧度
            var r = Math.sqrt( Math.pow( x2 - x1, 2 ) + Math.pow( y2 - y1, 2 ) );
            this.oGc.beginPath();
            for( var i = 0; i < this.nums; i ++ ){
                this.oGc.lineTo( x1 + r * Math.cos( angle * i ), y1 + r * Math.sin( angle * i ) );
            }
            this.oGc.closePath();
            this.oGc[this.paintType]();
        }
    }

3，界面操作很簡單，基本是選項卡的操作+html5的自定義屬性+classList的應用

以上就是html5自己做一個類似windows的畫圖軟件的方法的詳細內容，更多請關注php中文網其它相關文章！


網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。