这个绘图工具，我还没有做完，不过已经实现了总架构，以及常见的简易图形绘制功能：
1，可以绘制直线，圆，矩形，正多边形【已完成】
2，填充颜色和描边颜色的选择【已完成】
3，描边和填充功能的选择【已完成】
后续版本：
立即学习“前端免费学习笔记（深入）”；
橡皮擦，坐标系，线形设置，箭头，其他流程图形，裁剪与调整图形。。。。。
终极目标：
流程绘制软件
我是之前看见一位朋友在我的博客中留言说：
非常感谢这个朋友，今天终于抽出时间完成非常非常小的雏形!
完整的雏形代码，请自行打开，复制到本地测试.
windows简易画图工具 - by ghostwu // <![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 .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，图形绘制部分，我封装了一个类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的画图软件的方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1545030.html
微信扫一扫 
支付宝扫一扫 
