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

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

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

后續(xù)版本：

橡皮擦，坐標(biāo)系，線形設(shè)置，箭頭，其他流程圖形，裁剪與調(diào)整圖形。。。。。

終極目標(biāo)：

流程繪制軟件

我是之前看見(jiàn)一位朋友在我的博客中留言說(shuō)：

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

完整的雛形代碼，請(qǐng)自行打開(kāi)，復(fù)制到本地測(cè)試.

 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簡(jiǎn)易html' target='_blank'>畫(huà)圖工具 - by ghostwu /title  /head  body  div >
關(guān)于流程設(shè)計(jì)，后期要做的功能，思路基本上已經(jīng)有了，好了，圓規(guī)正傳，想要完成這個(gè)終極目標(biāo)，完成一個(gè)畫(huà)圖工具應(yīng)該就能接近目標(biāo)了。先體驗(yàn)下目前的簡(jiǎn)易功能，下面是可以正常畫(huà)圖的，【需要你的瀏覽器支持canvas才可以額】
主要來(lái)講下目標(biāo)的雛形架構(gòu)：
1，圖形繪制部分，我封裝了一個(gè)類(lèi)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畫(huà)布對(duì)象
cxtObj: 就是上下文繪圖環(huán)境
w: canvas的寬度
h: canvas的高度
fillStyle: 填充顏色
strokeStyle: 描邊顏色
lineWidth: 線寬
drawType: 默認(rèn)為畫(huà)直線
paintType: stroke/fill 兩種選擇（ 描邊/填充）
2，在原型對(duì)象上擴(kuò)展一個(gè)公共方法draw用來(lái)繪制圖形
draw方法，主要獲取起始點(diǎn)坐標(biāo)（startX, startY），以及終點(diǎn)坐標(biāo)( endX, endY );
然后調(diào)用init方法來(lái)獲取繪制狀態(tài)，繪制具體的圖形靠下面這個(gè)關(guān)鍵方法：
_this[_this.drawType](startX, startY, endX, endY)
這個(gè)方法的drawType會(huì)根據(jù)界面的實(shí)時(shí)選擇，變換對(duì)應(yīng)的繪制類(lèi)型，如：
_this[ line ]( startX, startY, endX, endY )
調(diào)用的就是oShape對(duì)象中的line，畫(huà)直線的方法
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;//邊對(duì)應(yīng)的角的弧度 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，界面操作很簡(jiǎn)單，基本是選項(xiàng)卡的操作+html5的自定義屬性+classList的應(yīng)用
以上就是html5自己做一個(gè)類(lèi)似windows的畫(huà)圖軟件的方法的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。