html5自己做一个类似windows的画图软件的方法

[摘要]这个绘图工具，我还没有做完，不过已经实现了总架构，以及常见的简易图形绘制功能：1，可以绘制直线，圆，矩形，正多边形【已完成】2，填充颜色和描边颜色的选择【已完成】3，描边和填充功能的选择【已完成】后...

这个绘图工具，我还没有做完，不过已经实现了总架构，以及常见的简易图形绘制功能：

1，可以绘制直线，圆，矩形，正多边形【已完成】

2，填充颜色和描边颜色的选择【已完成】

3，描边和填充功能的选择【已完成】

后续版本：

橡皮擦，坐标系，线形设置，箭头，其他流程图形，裁剪与调整图形。。。。。

终极目标：

流程绘制软件

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

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

关键词：html5自己做一个类似windows的画图软件的办法