画布清理////////////////////////////zzzz
HTML5画布清理，重绘，旧的线条也会出现
最佳答案
test和test2都需要重启一个路径，不然还是原来的，路径信息会先保存在内存里面，在调用stroke或者fill的时候，才会真正的绘制出来。因此，这两个方法都加上beginPath和closePath就行了，即
|
1
2
3
4
5
6
7
|
function test(){ cxt.beginPath(); cxt.moveTo(0,0); cxt.lineTo(100,100); cxt.stroke(); cxt.closePath();} |
note. 一般修改canvas属性的时候，如fillStyle，先要save，绘制完成后再restore还原到初始状态，不然会影响到下一次的绘制。
在学画画的时候，线条是最基本的了，而线条的连接可以组成任何图形。在Canvas中也是如此。
在开始之前我们先拿出画布和画笔：
代码如下:
var ctx = cvs.getContext('2d'); // 画笔
我们画画的时候，落笔点是不固定的，随时都会变。canvas虽然不是通过手来决定落笔点，但也有一个方法,就是moveTo。moveTo的作用相当于把笔尖提离画布，然后移动到指定的点（即坐标）。
代码如下:
此过程中不会画出任何图形，相当于你提着笔在画布上晃来晃去。
但晃来晃去是没用的，我们必须开始画。先画最简单的：直线
画直线的方法即lineTo，他的参数和moveTo一样的，都是一个点。
ctx.lineTo(x,y)当然，你画线的时候，落笔点也跟着移动了，所以lineTo之后落笔点就变成了他的目标点了。
代码如下:
ctx.lineTo(200,100);
此时你刷新网页，会发现画布上没有预想中的线，什么也没有。因为我们还少了一个步骤.lineTo其实是画的一条“路径”，本身是不可见的。如果要让他显示出来，我们必须对他进行“画”的操作。
用过PS的同学，肯定能知道图形的两种模式，一种是填充，另一种是描边。现在我们已经画了一条线，相当于PS中勾了一条路径，此时给路径描一下边，就能显示出图形了。
canvas描边的方法是stroke().现在让我们把代码补全：
代码如下:
ctx.lineTo(200,100);
ctx.stroke();此时刷新，就能看到一条线了。当然，你也可以连续绘制出几百条路径，再执行描边动作，即可一下画出几百条线。现在我们来用4条线画一个矩形：
代码如下:
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.lineTo(100,100);
ctx.stroke();
这里我们就是先绘出全部路径，再一次性描边。
——–作者的抱怨：Canvas绘图有个不好的地方就是：基本靠猜，很不直观。
严重提示：canvas的绘图过程（即填充与描边）是非常消耗资源的，如果想节省系统资源提高效率，最好是绘制好所有路径，再一次性填充或描边图形。
由上面的图形我们可以看出，默认的线条粗细是1px，而线条颜色是黑色。当然我们可以设置他们,但奇怪的是设置线条宽度是lineWidth，而设置线条样式的却叫strokeStyle，为什么不是lineStyle呢？我也不知道。：
代码如下:
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
上面的代码把线条宽度设置成了10px，线条颜色变成了半透明的红色。
如图1，刷新一下，好像有点不对呢！怎么左上角缺了一小块似得？这不是错觉。原因嘛要从canvas的线条绘制方式说起。
问题：如果我画的矩形路径是宽高都是100，此时我的边线宽度是10px，那么这个描了边的矩形整体宽高是多少？是100+10*2=120吗？
如果边线是完全描在路径外侧的话，那么就是120。但Canvas不是。Canvas中的线条都有一条“中线”，这条中线位于line的绝对中间，线条的笔画以中线向两侧扩展。比如你的线条宽度是1，那么中线就在0.5的位置；宽度是5，那么中线就是在2.5。canvas的图形在描边的时候，都是路径与line的中线贴合，然后描边。如图2：
所以，描边的时候线的一半在外侧，一半在内侧，即上面的矩形的整体宽度是100+(10/2)*2，等于110.
也正是因为这个原因，左上角出现缺角就理所当然了。因为这里没人画。
但为什么其余的角没有出现缺口呢？看你的图不是4个角都有缺口吗？
那是因为，我画线的过程中没有把画笔“提起来”，画笔是连续的，即没有moveTo过。不信我们现在来moveTo一下：
代码如下:
ctx.lineTo(200,100);
ctx.moveTo(200,100); //注意这里
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.lineTo(100,100);
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
ctx.stroke();
我们再画第二条线之前moveTo了一下，而且moveTo连坐标都没变，还是那个点，但刷新后图形变成了这个样子[图3]：
明白了？因为我们把笔提起来了。
现在我们删掉moveTo，不要纠结他了，我们来思考一下如何把左上角那个缺角给补上？
首先问个问题，我们的路径闭合了吗？这不是废话么，我们不是已经把路径绕回原点了么？当然算是闭合了！
错！这样只是让路径最后一个点和起点重合了而已，路径本身却没有闭合！
Canvas怎么闭合路径？用closePath().
代码如下:
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.lineTo(100,100);
ctx.closePath();//闭合路径
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
ctx.stroke();
此时刷新，就是一个完美的正方形了。图4：
无论我们把线条改到多粗————越粗越有人喜欢是吧？————这个四方形的四个角都是规矩的直角，不会出现圆滑的情况。圆滑的角是什么情况？请看PS中的四方形描边，图5：
看到了吧，越粗的边线，他的角的圆弧越大。
如果我想Canvas里面的边线也和PS这种一样，有没有办法呢？当然有，就是lineJoin属性。
lineJoin，意思即线的交汇处，有3个属性：miter(默认，尖角)，bevel（斜角）,round（圆角），如图6： 
毫无疑问我们一下就能明白我们的矩形用的是尖角，所以试着把他改成圆角看看：
图形变成了这样，图7： 
有点像PS的了吧？
另外，通过前面图我们了解到，Canvas的线条两端是平的，可不可以改呢？毕竟平的不好看。
也是可以的，即lineCap属性，这个就是定义线条的端点。lineCap有3个值：butt（平，默认）,round（圆）,square（方），如图8 
看图就能发现，其实平头跟方头是一样的，区别只是平头没有伸出去那么一截。圆头和方头都会伸出去一截，这一节是多长呢？就是线条宽度的一半。
你有没有想到什么？哈哈，前面的闭合路径的问题，如果我们把lineCap设为方头，效果也是一样的！
但为了保险起见，我们还是要把路径闭合了，切记！
我还要提醒一下：闭合的路径没有端点！所以闭合的路径上看不到端点的样式。
另外：lineCap与lineJoin有点相似，注意不要搞混。
如果你眼尖并且运气不好，你可能会发现有时候1像素的线条不是1像素宽，好像要宽一些，模糊一些。如图9： 
恭喜你!你遇到了一个不是bug的bug。这个很特别，我把他放到下一篇文章讲吧
画布清理////////////////////////////zzzz的更多相关文章
- [置顶] 小强的HTML5移动开发之路（9）——坦克大战游戏3
上一篇我们创建了敌人的坦克和自己的坦克,接下来就应该让坦克发子弹了,我们下面来看一下如何让我们的坦克发出子弹. 前面我们用面向对象的思想对Tank进行了封装,又利用对象冒充实现了我们的坦克和敌人的坦克 ...
- GDI+(Graphics Device Interface)例子
使用SolidBrush 单色画笔 Bitmap bitmap = new Bitmap(800, 600); Graphics graphics = Graphics.From ...
- Html 5 坦克大战（韩顺平县版本号）
html 5例如,下面的代码段: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/ ...
- canvas烟花-娱乐
网上看到一个释放烟花的canvas案例,很好看哦. 新建文本,把下面代码复制进去,后缀名改为html,用浏览器打开即可. 看懂注释后,可以自己修改烟花的各个效果.我试过让烟花炸成了心型.:-) < ...
- 小强的HTML5移动开发之路（9）——坦克大战游戏3
来自:http://blog.csdn.net/dawanganban/article/details/17754235 上一篇我们创建了敌人的坦克和自己的坦克,接下来就应该让坦克发子弹了,我们下面来 ...
- 小强的HTML5移动开发之路（8）——坦克大战游戏2
来自:http://blog.csdn.net/cai_xingyun/article/details/48629015 在上一篇文章中我们已经画出了自己的坦克,并且可以控制自己的坦克移动,我们继续接 ...
- 小强的HTML5移动开发之路（7）——坦克大战游戏1
来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...
- Android 自定义View修炼-高仿猎豹清理大师自定义内存开口圆环比例进度View
一.概述 看见猎豹清理大师的内存开口圆环比例进度 挺有意思的,于是就是想自己实现下这样的效果,于是反编译了猎豹清理 大师的app看了下,原来是有两张图,于是脑子里就过了下思路,利用上下两张图,旋转上面 ...
- Android 自定义控件-高仿猎豹清理大师自定义内存开口圆环控件
技术:Android+java 概述 看见猎豹清理大师的内存开口圆环比例进度 挺有意思的,于是就是想自己实现下这样的效果,于是反编译了猎豹清理 大师的app看了下,原来是有两张图,于是脑子里就过了 ...
随机推荐
- eclipse安装genymotion插件。
先发个我自己压缩的genymotion和VirtualBox,下载链接:http://pan.baidu.com/s/1o7wgJiU 1.在安装genymotion之后,打开eclipse,如下图操 ...
- 性能分析神器VisualVM
VisualVM 是一款免费的,集成了多个 JDK 命令行工具的可视化工具,它能为您提供强大的分析能力,对 Java 应用程序做性能分析和调优.这些功能包括生成和分析海量数据.跟踪内存泄漏.监控垃圾回 ...
- Linux下定时执行任务的几种方式
如果说我说如果,你的某一个目录下会经常的生成一些垃圾文件,比如访问日志.错误日志.core文件,而你又不想过几分钟就去手动检查一下,那么可以使用定时执行任务的方式来解决.目前我所知道的可以执行定时任务 ...
- H.264的优势和主要特点
H.264,同时也是MPEG-4第十部分,是由ITU-T视频编码专家组(VCEG)和ISO/IEC动态图像专家组(MPEG)联合组成的联合视频组(JVT,Joint Video Team)提出的高度压 ...
- [LintCode] Single Number 单独的数字
Given 2*n + 1 numbers, every numbers occurs twice except one, find it. Have you met this question in ...
- include、require、include_once和require_once理解
都是在当前文件中包含引入并运行指定文件,include和require的不通之处仅仅在于发生错误时include产生一个警告脚本继续执行,而require产生一个致命的错误,脚本停止运行.有了once ...
- SQl中的char,varcher,nvarchar,txt
CHAR char是定长的,在字段建立时,空间就固定了,不管是否插入值(NULL也包含在内),都占用字符的空间.例如: char(8),输入字符小于8,后面补空值.输入字符大于8时,会截取.CH ...
- hihoCoder 1183 连通性一·割边与割点（Tarjan求割点与割边）
#1183 : 连通性一·割边与割点 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 还记得上次小Hi和小Ho学校被黑客攻击的事情么,那一次攻击最后造成了学校网络数据的丢 ...
- KnockoutJS:
一.ko对象 js对象的改变都会导致viewmodel的变化,但view不一定变化 往ko对象里面push,viewmodel的变化,引起view的变化. 往js对象里面push,model的变化引起 ...
- UE4开发神秘海域类游戏原型 初阶（二）：动画资源的整合
前一篇已经确定神海类游戏原型的目标,首先要做的就是3C's(Character, Controls, Camera)的开发. UE4的3C's的程序部分开发主要也就是基于他的GamePlay Fr ...