在canvas上一些常见属性
2015-10-14 15:38
239 查看
以绘制矩形为例
绘制一个只有边框的矩形:
<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(); 绘制出图;
![](https://img-blog.csdn.net/20151014160723815)
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
绘制一个填充的实心矩形
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();
![](https://img-blog.csdn.net/20151014162701443)
这样就填充了一个红色的矩形。
------------------------------------------------------------------------------------------------------------------------------------------------------------------
单单绘制无边框的矩形的第二种方法
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillRect(20,10,150,75);
cxt.fillStyle="#FF0000";
![](https://img-blog.csdn.net/20151014163131895)
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
到这里就可以得到点规律啦:含有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:线的宽度。
![](https://img-blog.csdn.net/20151014170056604)
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
![](https://img-blog.csdn.net/20151014170407419)
只有最后一条线,之前线都没啦。
我的理解是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>
![](https://img-blog.csdn.net/20151014171623439)
当出现第二个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>
![](https://img-blog.csdn.net/20151014172227842)
当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>
![](https://img-blog.csdn.net/20151014172935858)
当closePath()下面有moveTo(),那之后的线就从这个新的moveTo()开始绘制。------------------------------------------------------------------------------------------------------------------------------------------------------总之,beginPath()是把画布都擦干净,重新开始绘制图片。 closePath();是结束当前图形的绘制。绘制另外一个图形。-------------------------------------------------------------------------------------------------------------------------------------------------------------我也是刚刚开始学习Canvas的使用。以上纯属个人观点。仅供参考。各位还是根据自己的实际情况去理解吧!
<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的使用。以上纯属个人观点。仅供参考。各位还是根据自己的实际情况去理解吧!
相关文章推荐
- 开启Material Design之旅——资源收集总结
- expect详解
- OOAD之架构模式-3层模式
- mac 下安装 redis
- sms_callback.sh
- Oracle中的rownum,ROWID的 用法
- 软测试-计算机组成原理、系统和网络安全机构
- C++Primer第五版 11.3.6节练习
- win10系统文字很模糊怎么办?win10浏览网页字体不清晰的原因及解决方法
- 工作随笔:BaseAsyncTask执行完doInBackground不执行onPostExecute
- leveldb源码中变长编码代码
- 于PsIsSystemThread无论是在线程系统线程标识获得
- Yii2 选择布局的方式
- 您的凭据不工作 之前用于连接到******的凭据无法工作。请输入新凭据。
- Android项目总结之社会化分享
- adb命令
- 测温芯片DS18B20详细解读
- 使用opencl实现编码算法中运动搜索模块速度对比
- UITableView的代理方法不执行的解决方案
- 机顶盒焦点问题