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

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

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

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

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

后续版本：

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

终极目标：

流程绘制软件

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

非常感谢这个朋友，今天终于抽出时间完成非常非常小的雏形!

完整的雏形代码，请自行打开，复制到本地测试.

windows简易画图工具 - by ghostwu

• 形状
• 颜色
• 绘制类型
• 线条宽度
• 橡皮擦

• 线条
• 圆形
• 矩形
• 正多边形
• 箭头

• 描边
• 填充

• 小号
• 中号
• 大号

.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;

}

关于流程设计，后期要做的功能，思路基本上已经有了，好了，圆规正传，想要完成这个终极目标，完成一个画图工具应该就能接近目标了。先体验下目前的简易功能，下面是可以正常画图的，【需要你的浏览器支持canvas才可以额】

主要来讲下目标的雏形架构：

1，图形绘制部分，我封装了一个类Shapefunction 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的应用