<form id="hz9zz"></form>
    • <form id="hz9zz"></form>
    

      

      <nobr id="hz9zz"></nobr>
      <form id="hz9zz"></form>
      3.   
          
      明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！
                   
        
                           
        
                        		  
        
                 
              
                
      html5自己做一個類似windows的畫圖軟件的方法
                
                  發表時間：2023-12-28             來源：明輝站整理相關軟件相關文章人氣：          
              
      [摘要]這個繪圖工具，我還沒有做完，不過已經實現了總架構，以及常見的簡易圖形繪制功能：1，可以繪制直線，圓，矩形，正多邊形【已完成】2，填充顏色和描邊顏色的選擇【已完成】3，描邊和填充功能的選擇【已完成】后續版本：橡皮擦，坐標系，線形設置，箭頭，其他流程圖形，裁剪與調整圖形。。。。。終極目標：流程繪制軟件...
      這個繪圖工具，我還沒有做完，不過已經實現了總架構，以及常見的簡易圖形繪制功能：
      1，可以繪制直線，圓，矩形，正多邊形【已完成】
      2，填充顏色和描邊顏色的選擇【已完成】
      3，描邊和填充功能的選擇【已完成】
      后續版本：
      橡皮擦，坐標系，線形設置，箭頭，其他流程圖形，裁剪與調整圖形。。。。。
      終極目標：
      流程繪制軟件
      我是之前看見一位朋友在我的博客中留言說：
      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="請輸入數字">
                        </li>
                    </ul>
                </div>
                <div class="item" data-type="paint-erase">
                    <ul>
                        <li>
                            <input type="number" data-role="erase-size" placeholder="請輸入數字">
                        </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; //正多邊形的邊數
        }

        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("請輸入邊數", 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>
      關于流程設計，后期要做的功能，思路基本上已經有了，好了，圓規正傳，想要完成這個終極目標，完成一個畫圖工具應該就能接近目標了。先體驗下目前的簡易功能，下面是可以正常畫圖的，【需要你的瀏覽器支持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; //正多邊形的邊數
    }
      canvasObj: 就是canvas畫布對象
      cxtObj: 就是上下文繪圖環境
      w: canvas的寬度
      h:  canvas的高度
      fillStyle: 填充顏色
      strokeStyle: 描邊顏色
      lineWidth: 線寬
      drawType: 默認為畫直線
      paintType: stroke/fill 兩種選擇（ 描邊/填充）
      2，在原型對象上擴展一個公共方法draw用來繪制圖形
      draw方法，主要獲取起始點坐標（startX, startY），以及終點坐標( endX, endY );
      然后調用init方法來獲取繪制狀態，繪制具體的圖形靠下面這個關鍵方法：
      _this[_this.drawType](startX, startY, endX, endY)
      這個方法的drawType會根據界面的實時選擇，變換對應的繪制類型，如：
      _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中文網其它相關文章！
      				
				
      網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




              
              
                 
              
                                            
                              		       
                          
                           		  
        
                            
      
日韩精品一区二区三区高清