在网页上画一个矩形(HTML5 Canvas作图)

原文链接:http://www.cnblogs.com/htmlcanvas/archive/2012/08/06/2624718.html

简化作图步骤,重写作图函数:

function DrawRect(Canvas,A,C)

{

//画个矩形,“A、C”是对顶点

var p1,p2=new Array(2);

p1=GetSmallest(A,C);

p2=GetBiggest(A,C);

with (Canvas)

 {

 rect(p1[0],p1[1],p2[0]-p1[0],p2[1]-p1[1]);

 }

}

其中所用到的两个函数如下:

function GetSmallest(A,B)

{

var i,co,i1,i2;

var R=new Array(2);

//返回P中X最小和Y最小的数,然后组成新的点返回

R[0]=A[0];

R[1]=A[1];

 

if (B[0]<R[0])

{

i1=B[0];

}

else

{

i1=R[0];

}

 

if (B[1]<R[1])

{

i2=B[1];

}

else

{

i2=R[1];

}

 

R[0]=i1;

R[1]=i2;

 

return(R);

}

 

function GetBiggest(A,B)

{

var i,co,i1,i2;

var R=new Array(2);

//返回P中X最小和Y最小的数,然后组成新的点返回

R[0]=A[0];

R[1]=A[1];

 

if (B[0]>R[0])

{

i1=B[0];

}

else

{

i1=R[0];

}

 

if (B[1]>R[1])

{

i2=B[1];

}

else

{

i2=R[1];

}

 

R[0]=i1;

R[1]=i2;

 

return(R);

}

 

下面是更多的实例,这些例子都很有代表性,一通百通:

3、画矩形,“A、C”是对顶点:

 

<html><head>

<title>Google搜索:HTML 5 金海龙</title>

<script type="text/javascript" src="bigengineer.js"></script>

</head>

<body><canvas id="cc" width="800" height="200"></canvas>

<script type="text/javascript">

var c=document.getElementById("cc");

var hb=c.getContext("2d");

hb.beginPath();

 

var A=Array(50,50);

var C=Array(150,80);

DrawRect(hb,A,C);

hb.stroke(); 

 

hb.endPath();

</script>

</body>

</html>

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

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

这正说明了我的编程实力

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

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

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

转载于:https://www.cnblogs.com/htmlcanvas/archive/2012/08/06/2624718.html

上一篇:基础【七】小数据池


下一篇:父类指针强转为子类指针的问题