您的位置:首页 > 其它

在canvas上一些常见属性

2015-10-14 15:38 232 查看
以绘制矩形为例

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;">

</canvas>


绘制一个只有边框的矩形:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle = "blue";
cxt.rect(20,10,150,75);
cxt.stroke();
</script>

c.getContext("2d"):指定在画面上绘制的类型。

strokeStyle="blue":  边框的颜色,这里就是矩形边框的颜色;

rext(x,y,width,height);对应(x偏移量,y偏移量,长度,高度);

stroke(); 绘制出图;



-------------------------------------------------------------------------------------------------------------------------------------------------------------------

绘制一个填充的实心矩形

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle = "blue";
cxt.rect(20,10,150,75);
cxt.fillStyle="#FF0000";
cxt.fill();
cxt.stroke();



这样就填充了一个红色的矩形。

------------------------------------------------------------------------------------------------------------------------------------------------------------------

单单绘制无边框的矩形的第二种方法

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillRect(20,10,150,75);
cxt.fillStyle="#FF0000";



-----------------------------------------------------------------------------------------------------------------------------------------------------------------

到这里就可以得到点规律啦:含有stroke字符的属性名是用于绘制只有边框的空心图形。含有full字条的属性名是用于绘制实心的图形。

比如 strokeStyle是边框的颜色。fillStyle填充的颜色。  

rect是只有边框的矩形。fillRect是有填充颜色的矩形。

------------------------------------------------------------------------------------------------------------------------------------------------------------------

接下来看看beginPath()和 closePath()是什么东西;

先随便绘制几条直线

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle='#FF0000';
cxt.lineWidth='5';
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.lineTo(190,80);
cxt.lineTo(100,190);
cxt.stroke();
</script>
cxt.lineWidth:线的宽度。



moveTo:画线的起始坐标

lineTo:画一次线的终点坐标

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

现在我们加入beginPath()

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle='#FF0000';
cxt.lineWidth='5';
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.beginPath();
cxt.lineTo(190,80);
cxt.lineTo(100,190);
cxt.stroke();
</script



只有最后一条线,之前线都没啦。

beginPath()的官方描述是这样的:
(1)beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。(2)当一个画布的环境第一次创建,beginPath() 方法会被显式地调用。
我的理解是beginPath() 就像一个橡皮擦。把之前在画布上绘制的图片全部擦掉了。所以只显示了beginPath()后面的图形。还有就是既然之前的都擦掉了,那就是没了moveTo. 只有两个lineTo 还是能绘制直线。这里我的理解吧是这样的:moveTo是代表起点。然后绘制到第一个lineTo(1). 当出现第二个lineTo(2)的时候。第一个lineTo(1)就变成了起点,所以就算没有moveTo,第一个出现的lineTo也可以充当的moveTo的作用。所以就是 moveTo--->lineTo lineTo---->lineTo 但是lineTo是不能和moveTo连接的看这例子<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle='#FF0000';
cxt.lineWidth='5';
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.moveTo(10,150);
cxt.lineTo(190,80);
cxt.lineTo(100,190);
cxt.stroke();
</script>



当出现第二个moveTo(10,150)的时候,就相当于开始绘制另外一条直线了。----------------------------------------------------------------------------------------------------------------------------------------------------------------然后最一个closePath();官方描述:(1)如果画布的子路径是打开的,closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。(2)如果子路径已经闭合了,这个方法不做任何事情。(3)一旦子路径闭合,就不能再为其添加更多的直线或曲线了。要继续向该路径添加,需要通过调用 moveTo() 开始一条新的子路径。
还是通过例子理解理解吧<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle='#FF0000';
cxt.lineWidth='5';
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.closePath();
cxt.lineTo(10,50);
cxt.lineTo(190,80);
cxt.lineTo(100,190);
cxt.stroke();
</script>


当moveTo(10,10)画到lineTo(150,150)时就结束了之后的绘制。 并且之后的线重新从moveTo(10,10)开始向closePath()之后的lineTo(10,50)绘制,这个就验证了官方描述的第一点。(closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。)
如果我们在closePath()后面给个moveTo()。那么后面的线就会前当前的moveTo()开始绘制了。验证了最三点(要继续向该路径添加,需要通过调用 moveTo() 开始一条新的子路径。)<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle='#FF0000';
cxt.lineWidth='5';
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.closePath();
cxt.moveTo(10,150);
cxt.lineTo(10,50);
cxt.lineTo(190,80);
cxt.lineTo(100,190);
cxt.stroke();
</script>



当closePath()下面有moveTo(),那之后的线就从这个新的moveTo()开始绘制。------------------------------------------------------------------------------------------------------------------------------------------------------总之,beginPath()是把画布都擦干净,重新开始绘制图片。 closePath();是结束当前图形的绘制。绘制另外一个图形。-------------------------------------------------------------------------------------------------------------------------------------------------------------我也是刚刚开始学习Canvas的使用。以上纯属个人观点。仅供参考。各位还是根据自己的实际情况去理解吧!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: