画正圆角矩形 - HTML5 Canvas 作图

function DrawRoundRect(Canvas,P1,P2,Radius)
功能：画正圆角矩形
参数：P1：矩形左上角坐标；P2：矩形右下角坐标；
Radius：圆角大小

源代码：

function DrawRoundRect(Canvas,P1,P2,Radius)
{
//画个圆角矩形
var A=new Array(Math.min(P1[0],P2[0]),Math.min(P1[1],P2[1]));
var C=new Array(Math.max(P1[0],P2[0]),Math.max(P1[1],P2[1]));
var B=new Array(A[0],C[1]);
var D=new Array(C[0],A[1]);
Canvas.beginPath();
var P=new Array(A[0],A[1]+Radius);
DrawArcTo(Canvas,P,B,C,Radius);
var P=new Array(B[0]+Radius,B[1]);
DrawArcTo(Canvas,P,C,D,Radius);
var P=new Array(C[0],C[1]-Radius);
DrawArcTo(Canvas,P,D,A,Radius);
var P=new Array(D[0]-Radius,D[1]);
DrawArcTo(Canvas,P,A,B,Radius);

Canvas.stroke();
/*
Canvas.beginPath();
DrawAOBArc(Canvas,C,D,A,Radius);
Canvas.stroke();
Canvas.beginPath();
DrawAOBArc(Canvas,D,A,B,Radius);
Canvas.stroke();
Canvas.endPath();
*/
}

实例：
<html>
<script type="text/javascript" src="bigengineer.js"></script>
<body><canvas id="cc" width="2000" height="2000"></canvas>
<script type="text/javascript">
var c=document.getElementById("cc");
var hb=c.getContext("2d");

var A=new Array(55,55);
var C=new Array(150,150);

hb.beginPath();
hb.strokestyle="#000000";
DrawRoundRect(hb,A,C,10);
hb.stroke();
hb.endPath();
</script>
</body>
</html>
用Google浏览器浏览的效果如下：

如果Radius设置的太大，那么就能画出意想不到的图片，例如：
……
DrawRoundRect(hb,A,C,80);//把Radius设置成80
hb.stroke();
……
用Google浏览器浏览的效果如下：

……
DrawRoundRect(hb,A,C,100);//把Radius设置成100
hb.stroke();
……
用Google浏览器浏览的效果如下：

本文节选自我金海龙2010年写的《 HTML5 Canvas 作图函数库2.0版本.pdf 》,

在HTML5刚登陆中国大陆的时候，奇缺权威资料，我及时写作，刚一发布，就引起了关注，也成为被盗版的目标，当你们在Google搜索：HTML5 作图就可以看到我金海龙作品的排名。

这正说明了我的编程实力。

再接再厉，做完一个版本、开发完一次，才能觉得不完美。

我最近正在写作《HTML 5 Canvas应用开发者指南》，写完一章节，就发布在我金海龙的个人主页上，

在我个人博客上只发表其中一些部分段落，写写感想，或者其它的，只要我有时间的话。

转载于:https://www.cnblogs.com/htmlcanvas/archive/2012/08/13/2635700.html

画正圆角矩形 - HTML5 Canvas 作图相关推荐

画闭合的多边形 - HTML5 Canvas 作图
10.function DrawPolygon(Canvas,P) 功能:画闭合的多边形参数:P是一个包含各个顶点坐标的数组实例: <html> <script type=&qu ...
画圆角 - HTML5 Canvas 作图
2.function DrawAOBArc(Canvas,A,O,B,Radius) 功能:画圆角参数:Radius:圆角的大小:A,B:边上两点: 源代码: function DrawAOBArc ...
画椭圆 - HTML5 Canvas 作图
8.function DrawEllipse(Canvas,O,OA,OB) 功能:画椭圆参数:O:椭圆中心的坐标: OA,OB:长轴.短轴的长度源代码: function DrawEllipse ...
用html5 canvas画猪头,使用HTML5 Canvas实现画图效果
使用HTML5可以非常简单地在canvas上实现画图应用,用支持html5的浏览器便可在下面的区域进行绘画,要看到演示效果,请确保你的浏览器支持HTML5: 效果演示您的浏览器不支持canvas! ...
使用html画简单的图形,HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程使用html5 canvas 绘制精美的图...
HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是 ...
canvas二次、三次贝赛尔曲线绘制气泡圆角矩形立体桃心
绘制气泡二次贝塞尔曲线 canvas quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添加一个点. quadraticCurveTo(cpx,cpy,x, ...
小程序 uni canvas绘制圆角图片圆角矩形
小程序 uni canvas绘制圆角图片圆角矩形获取canvas的宽度保证适应屏幕 uni.getSystemInfo({success: (res)=> { // res - 各种参数le ...
html圆角矩形的渐变色,canvas圆角矩形 PS制作渐变圆角矩形：方法一：
用canvas画只有一个角是圆角的矩形,能画出来么? CSS布局HTML小编今天和大家分享各位大侠指点, 找到方法了float[] radii={12f,12f,0f,0f,0f,0f,0f,0f}; ...
Android 使用CornerPathEffect绘制圆角矩形
CornerPathEffect 可以用来画圆角,比如我们想要画一个圆角矩形,那么就可以使用. 代码: public class CornerPathEffectViewTest extends Vi ...

画正圆角矩形 - HTML5 Canvas 作图

画正圆角矩形 - HTML5 Canvas 作图相关推荐

最新文章

热门文章