html5 canvas动画教程：亲手做一个类似windows画图软件(3)_H5之家

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

1，图形绘制部分，我封装了一个类Shape 1 function Shape(canvasObj, cxtObj, w, h) { 2 this.oCanvas = canvasObj; 3 this.oGc = cxtObj; 4 this.oCanvas.width = w; 5 this.oCanvas.height = h; 6 this.fillStyle = '#000'; 7 this.storkeStyle = '#000'; 8 this.lineWidth = 1; 9 this.drawType = 'line'; 10 this.paintType = 'stroke'; 11 this.nums = 6; //正多边形的边数 12 }

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，画直线的方法

1 Shape.prototype = { 2 init: function () { 3 this.oGc.fillStyle = this.fillStyle; 4 this.oGc.strokeStyle = this.strokeStyle; 5 this.oGc.lineWidth = this.lineWidth; 6 }, 7 draw: function () { 8 var _this = this; 9 this.oCanvas.onmousedown = function ( ev ) { 10 _this.init(); 11 var oEvent = ev || event, 12 startX = oEvent.clientX - _this.oCanvas.offsetLeft, 13 startY = oEvent.clientY - _this.oCanvas.offsetTop; 14 _this.oCanvas.onmousemove = function ( ev ) { 15 _this.oGc.clearRect( 0, 0, _this.oCanvas.width, _this.oCanvas.height ); 16 var oEvent = ev || event, 17 endX = oEvent.clientX - _this.oCanvas.offsetLeft, 18 endY = oEvent.clientY - _this.oCanvas.offsetTop; 19 _this[_this.drawType](startX, startY, endX, endY); 20 }; 21 _this.oCanvas.onmouseup = function(){ 22 _this.oCanvas.onmousemove = null; 23 _this.oCanvas.onmouseup = null; 24 } 25 } 26 }, 27 line: function ( x1, y1, x2, y2 ) { 28 this.oGc.beginPath(); 29 this.oGc.moveTo( x1, y1 ); 30 this.oGc.lineTo( x2, y2 ); 31 this.oGc.closePath(); 32 this.oGc.stroke(); 33 }, 34 circle : function( x1, y1, x2, y2 ){ 35 this.oGc.beginPath(); 36 var r = Math.sqrt( Math.pow( x2 - x1, 2 ) + Math.pow( y2 - y1, 2 ) ); 37 this.oGc.arc( x1, y1, r, 0, 2 * Math.PI, false ); 38 this.oGc.closePath(); 39 this.oGc[this.paintType](); 40 }, 41 rect : function( x1, y1, x2, y2 ){ 42 this.oGc.beginPath(); 43 this.oGc.rect( x1, y1, x2 - x1, y2 - y1 ); 44 this.oGc[this.paintType](); 45 }, 46 polygon : function( x1, y1, x2, y2 ){ 47 var angle = 360 / this.nums * Math.PI / 180;//边对应的角的弧度 48 var r = Math.sqrt( Math.pow( x2 - x1, 2 ) + Math.pow( y2 - y1, 2 ) ); 49 this.oGc.beginPath(); 50 for( var i = 0; i < this.nums; i ++ ){ 51 this.oGc.lineTo( x1 + r * Math.cos( angle * i ), y1 + r * Math.sin( angle * i ) ); 52 } 53 this.oGc.closePath(); 54 this.oGc[this.paintType](); 55 } 56 }

3，界面操作很简单，基本是选项卡的操作+html5的自定义属性+classList的应用

分享给小伙伴们：

本文标签： canvas，html5，画图软件/">canvas，html5，画图软件

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻