HTML5Canvas自定义圆角矩形与虚线（RoundedRectangle和DashLine）实现向HTMLCanvas2d上下文映射对象中添加自定义的函数功能演示，如何分块以及控制分隔间隔大小，学会绘制圆角矩形的技巧。HTML5Canvas描绘对象中提供的原生功能没有实现圆角矩形与虚线的功能，但是通过JavaScript语言的Object.prototype可以实现对对象CanvasRenderingContext2D添加这两个函数功能。代码的演示效果如下：组件fishcomponent.js代码如下：
复制代码
代码如下：
CanvasRenderingContext2D.prototype.roundRect=function（x，y，width，height，radius，fill，stroke）{if（typeofstroke==“undefined”）{stroke=true;}if（typeofradius===“undefined”）{radius=5;}this.beginPath（）;this.moveTo（x+半径，y）;this.lineTo（x+width-radius，y）;this.quadraticCurveTo（x+宽度，y，x+宽度，y+半径）;this.lineTo（x+宽度，y+高度-半径）;this.quadraticCurveTo（x+宽度，y+高度，x+宽度-半径，y+高度）;this.lineTo（x+半径，y+高度）;this.quadraticCurveTo（x，y+height，x，y+height-radius）;this.lineTo（x，y+radius）;
this.quadraticCurveTo（x，y，x+半径，y）;this.closePath（）;如果（行程）{this.stroke（）;}if（fill）{this.fill（）;}};CanvasRenderingContext2D.prototype.dashedLineTo=函数（fromX，fromY，toX，toY，pattern）{//默认间隔距离->5pxif（typeofpattern===“undefined”）{pattern=5;}//计算增量x和增量yvardx=（toX-fromX）;vardy=（toY-fromY）;vardistance=Math.floor（Math.sqrt（dx*dx+dy*dy））;vardashlineInteveral=（pattern<=0）吗？距离：（距离/模式）;vardeltay=（dy/distance）*模式；
vardeltax=（dx/distance）*模式；//绘制虚线this.beginPath（）;for（vardl=0;dl<dashlineInteveral;dl++）{if（dl％2）{this.lineTo（fromX+dl*deltax，fromY+dl*deltay）;}else{this.moveTo（fromX+dl*deltax，fromY+dl*deltay）;}}this.stroke（）;};
HTML中调用演示：
复制代码
代码如下：
<！DOCTYPEhtml><html><head><metahttp-equiv=“X-UA-Compatible”content=“chrome=IE8”><metahttp-equiv=“Content-type”content=“text/html;charset=UTF-8“><title>画布圆形矩形演示</title><scriptsrc=”fishcomponent.js“></script><linkhref=”default.css“rel=”stylesheet“/><script>varctx=null;//全局变量2d上下文varimageTexture=null;window.onload=function（）{varcanvas=document.getElementById（“text_canvas”）;console.log（canvas.parentNode.clientWidth）;canvas.width=canvas.parentNode.clientWidth;canvas.height=canvas.parentNode.clientHeight;如果（！canvas.getContext）{
console.log（“不支持画布。请安装兼容HTML5的浏览器。”）;返回;}varcontext=canvas.getContext（'2d'）;context.strokeStyle=“red”;context.fillStyle=“RGBA（100,255,100，0.5）”;context.roundRect（50，50，150，150，5，true）;context.strokeStyle=“blue”;for（vari=0;i<10;i++）{vardelta=i*20;varpattern=i*2+1;context.dashedLineTo（250，50+delta，550，50+delta，pattern）;}}</script></head><body><h1>HTML5画布划线行演示-通过GloomyFish</h1><pre>划线行和圆角矩形</pre><
</div></body></html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60715.shtml
