Canvas版画图、圆角矩形、圆形、矩形、图形填充、mvc模式重新整_H5之家

使用Canvas实现画图程序。（转载注明出处与作者啊）本次主要更新了一下功能：新添加图形：矩形，圆形，圆角矩形实现了描边颜色与填充颜色的选择使用类似mvc的模

使用Canvas实现画图程序。（转载注明出处与作者啊）

本次主要更新了一下功能：

新添加：矩形，圆形，圆角矩形

实现了描边颜色与填充颜色的选择

使用类似mvc的重新整理了代码。

M层：特殊的路径规划代码组成，只包含路径规划，无样式设计。

V层：设计样式，调用路径规划代码，实际绘制图案。在这里完成填充、描边。

C层：判断选择框内容，调用不同的实际绘制代码

其他：事件处理与辅助计算函数等

不足：感觉代码结构还是不够好，果然是我没用面向对象么？

下面是效果图：

Canvas版画图、圆角矩形、圆形、矩形、图形填充、mvc模式重新整

下面是源代码：

①本体HTML5代码

<!docutype html>  <canvas id="canvas" width="800" height="500"> </canvas> </body>  <script type = "text/javascript" src ="mikuCanvasShapePath.js"></script>  <script type = "text/javascript" src ="mikuCanvasPaintAppMain.js"></script> </html>

②特殊图形路径规划代码

//虚线 function dashedLinePP(context,x1,y1,x2,y2,dashLength){ //水平长度 var deltaX = x2 - x1; //垂直长度 var deltaY = y2 - y1; //虚线数量 var numDashed = Math.floor( Math.sqrt(deltaX*deltaX+deltaY*deltaY)/dashLength ); //开始路径规划 context.beginPath(); for(var i=0; i<numDashed;i++){ //这种写法太强大了 //(deltaX/numDashed)是指虚线的长度 context[i%2===0 ? "moveTo":"lineTo"](x1+(deltaX/numDashed)*i,y1+(deltaY/numDashed)*i); } } //圆角矩形 function roundedRectPP(context,cornerX,cornerY,width,height,cornerRadius){ //开始路径规划 context.beginPath(); //设置开始位置（不是顶点是为了不产生小尾巴） //为了不产生小尾巴做判断 if(width > 0){ context.moveTo(cornerX+cornerRadius,cornerY); }else{ context.moveTo(cornerX-cornerRadius,cornerY); } //右上角 context.arcTo(cornerX+width,cornerY,cornerX+width,cornerY+height,cornerRadius); //右下角(注意：由于arcTo的移动，，当前点已经到：cornerX+width，cornerY+cornerRadius,所以不要再设置moveTo) context.arcTo(cornerX+width,cornerY+height,cornerX,cornerY+height,cornerRadius); //左下角 context.arcTo(cornerX,cornerY+height,cornerX,cornerY,cornerRadius); //左上角 if(width > 0){ context.arcTo(cornerX,cornerY,cornerX+cornerRadius,cornerY,cornerRadius); }else{ context.arcTo(cornerX,cornerY,cornerX-cornerRadius,cornerY,cornerRadius); } } //网格线 function gridPP(context,stepx,stepy){ //开始路径规划 context.beginPath(); //绘制x轴网格 //注意：canvas在两个像素的边界处画线 //由于定位机制，1px的线会变成2px //于是要+0.5 for(var i=stepx+0.5;i<context.canvas.width;i=i+stepx){ //开启路径 //context.beginPath(); context.moveTo(i,0); context.lineTo(i,context.canvas.height); } //绘制y轴网格 for(var i=stepy+0.5;i<context.canvas.height;i=i+stepy){ //context.beginPath(); context.moveTo(0,i); context.lineTo(context.canvas.width,i); } }; //坐标轴 function axesPP(context,axesMargin,htSpace,vtSpace,tickLong){ function mikuLoc(locX,locY){ this.x = locX; this.y = locY; } var originLoc = new mikuLoc(axesMargin, context.canvas.height-axesMargin); var axesW = context.canvas.width - (axesMargin*2); var axesH = context.canvas.height - (axesMargin*2); context.beginPath(); //x,y轴规划 horizontalAxisPP(); verticalAxisPP(); //x,y轴标签规划 verticalAxisTicksPP(); horizontalAxisTicksPP(); function horizontalAxisPP(){ context.moveTo(originLoc.x, originLoc.y); context.lineTo(originLoc.x + axesW, originLoc.y); } function verticalAxisPP(){ context.moveTo(originLoc.x, originLoc.y); context.lineTo(originLoc.x, originLoc.y - axesH); } function verticalAxisTicksPP(){ var deltaX; //当前垂直tick的y轴坐标 var nowTickY =originLoc.y-vtSpace; for(var i=1;i<=(axesH/vtSpace);i++){ if(i%5 === 0){ deltaX=tickLong; }else { deltaX=tickLong/2; } //移动到当前的tick起点 context.moveTo(originLoc.x-deltaX,nowTickY); context.lineTo(originLoc.x+deltaX,nowTickY); nowTickY=nowTickY-vtSpace; } } function horizontalAxisTicksPP(){ var deltaY; var nowTickX = originLoc.x+htSpace; for(var i=1;i<=(axesW/htSpace);i++){ if(i%5 === 0){ deltaY = tickLong; }else{ deltaY = tickLong/2; } context.moveTo(nowTickX,originLoc.y+deltaY); context.lineTo(nowTickX,originLoc.y-deltaY); nowTickX = nowTickX + htSpace; } } }; //辅助定位线 function guideWiresPP(context,x,y){ context.beginPath(); drawHorizontalLine(y); drawVerticalLine(x); function drawHorizontalLine(y){ context.moveTo(0,y+0.5); context.lineTo(context.canvas.width,y+0.5); } function drawVerticalLine(x){ context.moveTo(x+0.5,0); context.lineTo(x+0.5,context.canvas.height); } }