前台（31）
JS/Jquery（21）
虽然大家都称Canvas为html5的新标签，看起来好像Canvas属于html语言的新知识，但其实Canvas画图是通过javascript来做的。所以，如果你想学习Canvas画图，你必须要有Javascript基础。
另外，画图嘛，总有一些图像方面的术语和知识点，所以如果你有过做图或美工经验，学习Canvas会更容易。
Canvas，意为画布也。而Html5中的Canvas也真的跟现实生活中的画布非常相似。所以，把他看成一块实实在在的画布可以加快理解。
用canvas作画，首先，你需要有一块“画布”。如果你的书架里面没有画布，你可以买一卷回来放进去。当然，在网页里面我们不需要花钱买，直接写一个canvas即可，类似：
&canvas id=&cvs& width=&800& height=&600&&你的浏览器不支持canvas&/canvas&
其中标签里面的文字是给不支持canvas的浏览器看的，支持的永远看不到。
这个画布的特性有必要说一下，他有两个原生的属性，即width和height.同时，因为他也是一个html元素，所以他也可以使用css来定义width和height，但是，千万要注意：他自身的宽高和通过css定义的宽高是不一样的！
我们用JS来改变Canvas的宽高，是这样的：
canvas.width= 400
canvas.height = 300
但用JS通过操作CSS来改变Canvas的宽高，则是这样：
canvas.style.width = '400px'
canvas.style.height = '300px'
看得出来，语法上区别是很明显的。实际上区别更明显。
他们的区别是什么？
比如一块宽1000的画布，你在画布左侧画了一条竖线，宽100像素。此时你把画布自身的width设为500，相当于把画布的右半边咔嚓掉了，但此时那竖线的宽度还是100。
但如果你通过CSS来把画布的宽度变成500，那就相当于把画布由1000挤压到500，所以竖线的宽度变成了50.
(这只是理论情况，实际上设置canvas的宽度时，他会清空掉已画出来的内容。。)
Canvas自身的宽高就是画布本身的属性，而css给他的宽高则可以看作是缩放，如果你缩放的太过随意，那么画布上的图形可能变得你自己都认不出来。
所以有个建议：除非特殊情况，一定不要用css来定义Canvas的宽高。
画布有了，现在我们把他拿出来：
var cvs = document.getElementById('cvs');
看，跟获取其他元素的办法一模一样。
现在画布已经有了，想往上面涂鸦，当然还需要一只笔。canvas取得笔的方法如下：
var ctx = cvs.getContext('2d');其中getContext方法就是用来拿笔的，但这里还有个参数:2d，这是什么意思呢?这个可以看作是画笔的种类。
既然有2D，那么就会有3d了？以后估计会有，但现在没有。所以我们先用这只2d的笔吧。
那么我们可以多放几只笔来备用吗？答案是不能。
我要问一个问题：你画图的时候是同时用几只笔呢？相信99.9%的人都是只能用一只，虽然有些武林高手比如小龙女之类的可以两只手同时画，但这对一般人来说很不现实，是不是？
所以现在你可以感到欣慰了，因为html5的canvas标签也只支持同时用一支笔！
有的写JS写的比较熟的同学可能会想耍个小聪明：我用前面获取画笔的方法多整几只笔出来，不就行了？！
var con = cvs.getContext('2d');
var ctx = cvs.getContext('2d');
哈哈哈哈，好像成功了，在没测试之前我也是这么想的，但，其实这只是一个幻觉！
因为我发现，我把其中一支笔蘸上红墨水，另外一支笔也自动蘸上了红墨水！因为两支笔是一体的！fuck。
如果你需要画出不同的颜色，办法就是把这只唯一的“笔”不停的蘸上新颜色。
这其实不是一个优点，是个缺陷，以后你会体会到的。
2d世界，就是平面，在一个平面上确定一个点，需要两个值，x坐标和y坐标。这是一个很重要的基础概念。
canvas的原点是左上角，跟flash一样。但蛋疼的是数学中的原点是左下角。这个…只能说习惯就好
一些画图的基本常识
首先你需要知道，怎样的坐标变化会画出什么线？比如，x坐标变大而y坐标不变，则能画出一条横线；y坐标变化而x坐标不变，则是一条竖线。
当然，还有斜线，左斜线右斜线什么的，如果能对照图片，大部分人都能一看即懂；只是用代码画起来就比较郁闷了，只能靠逻辑思维想出来。
如果你现在感觉对线条一片混沌，也不用担心，在学习的过程中自然会理解。
canvas有一个和现实的画布不一样的特点就是，他默认是透明的，没有背景色。这在大部分时候非常重要。&
在学画画的时候，线条是最基本的了，而线条的连接可以组成任何图形。在Canvas中也是如此。
在开始之前我们先拿出画布和画笔：
var cvs = document.getElementById('cvs'); //画布
var ctx = cvs.getContext('2d'); // 画笔
我们画画的时候，落笔点是不固定的，随时都会变。canvas虽然不是通过手来决定落笔点，但也有一个方法,就是moveTo。moveTo的作用相当于把笔尖提离画布，然后移动到指定的点（即坐标）。
ctx.moveTo(x,y)
此过程中不会画出任何图形，相当于你提着笔在画布上晃来晃去。
但晃来晃去是没用的，我们必须开始画。先画最简单的：直线
画直线的方法即lineTo，他的参数和moveTo一样的，都是一个点。
ctx.lineTo(x,y)当然，你画线的时候，落笔点也跟着移动了，所以lineTo之后落笔点就变成了他的目标点了。
ctx.moveTo(100,100);
ctx.lineTo(200,100);
此时你刷新网页，会发现画布上没有预想中的线，什么也没有。因为我们还少了一个步骤.lineTo其实是画的一条“路径”，本身是不可见的。如果要让他显示出来，我们必须对他进行“画”的操作。
用过PS的同学，肯定能知道图形的两种模式，一种是填充，另一种是描边。现在我们已经画了一条线，相当于PS中勾了一条路径，此时给路径描一下边，就能显示出图形了。
canvas描边的方法是stroke().现在让我们把代码补全：
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.stroke();此时刷新，就能看到一条线了。当然，你也可以连续绘制出几百条路径，再执行描边动作，即可一下画出几百条线。现在我们来用4条线画一个矩形：
ctx.moveTo(100,100);
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.lineWidth = 10;
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.moveTo(100,100);
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.moveTo(100,100);
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有点相似，注意不要搞混。
更多详细教程可参考：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：33031次
排名：千里之外
原创：16篇
转载：38篇
(5)(12)(29)(8)　以前用canvas画图时，都是直接在canvas标签里直接写上宽高，没有问题，但也没有探究过为什么宽高要直接写在canvas标签里，因为各个资料的例子上都是这么写的。今天王sir提出了一个问题：如果把宽高写在&style&里，看看会有什么不同。自己试了以下，果然有问题。
先看一下代码：
&!DOCTYPE&html&&html&&head&&meta&charset="utf-8"&&title&canvas&/title&&meta&name="Keywords"&content=""&&meta&name="author"&content="@my_programmer"&&style&type="text/css"&
&&&&body{margin:0;}
&&&&canvas{margin:20&
&&&&&&&&&&&/*width:&400
&&&&&&&&&&&height:&300*/
&&&&&&&&&&}&&&&&/style&&/head&&body&onload="draw()"&
&&&&&canvas&id="canvas"&width=400&height=300&style="border:1px&solid&#f00;"&&/canvas&&script&
&&&&function&draw()&{
&&&&&&&&var&canvas=document.getElementById('canvas');
&&&&&&&&var&context=canvas.getContext('2d');
&&&&&&&&context.beginPath();
&&&&&&&&context.moveTo(20,20);
&&&&&&&&context.lineTo(200,100);
&&&&&&&&context.lineWidth=5;
&&&&&&&&context.stroke();
&&&&}&/script&&/body&&/html&
1.宽：400；高：300；直接写在&canvas&里的效果：
2、删除&canvas&里的宽高，宽：400；高：300；写在&style&里的效果：
　　为什么两者的效果会不一样呢？
　　canvas跟其他标签一样，也可以通过css来定义样式。但这里需要注意的是：canvas的默认宽高为300px&*&150px,在css中为canvas定义宽高，实际上把宽高为300px&*&150px的画布进行了拉伸，如果在这样的情况下进行canvas绘图，你得到的图形可能就是变形的效果。所以，在canvas绘图时，应该在canvas标签里直接定义宽高。
Views(...) Comments()html5 Canvas画图教程(2)―画直线与设置线条的样式如颜色/端点/交汇点_模板无忧
html5 Canvas画图教程(2)―画直线与设置线条的样式如颜色/端点/交汇点_HTML5教程
推荐：实际上，除了sessionStorage和localStorage外，HTML5还支持通过本地数据库进行本地数据存储，HTML5采用的是"SQLLite"这种文件型数据库，该数据库多集中在嵌入式设备上，熟悉IOS/Android开发的同学，应该对SQLLite数据库比较熟悉
如果你还不知道Canvas是什么，可以看看上一篇. 在学画画的时候，是最基本的了，而线条的连接可以组成任何图形。在Canvas中也是如此。 在开始之前我们先拿出画布和画笔： 复制 代码如下: var cvs = document.getElementById('cvs'); //画布 var ctx = cvs.getContext('2d'); // 画笔 我们画画的时候，落笔点是不固定的，随时都会变。canvas虽然不是通过手来决定落笔点，但也有一个方法,就是moveTo。moveTo的作用相当于把笔尖提离画布，然后移动到指定的点（即坐标）。 复制代码 代码如下: ctx.moveTo(x,y) 此过程中不会画出任何图形，相当于你提着笔在画布上晃来晃去。 但晃来晃去是没用的，我们必须开始画。先画最简单的：直线 画直线的方法即lineTo，他的参数和moveTo一样的，都是一个点。 ctx.lineTo(x,y)当然，你画线的时候，落笔点也跟着移动了，所以lineTo之后落笔点就变成了他的目标点了。 复制代码 代码如下: ctx.moveTo(100,100); ctx.lineTo(200,100); 此时你刷新网页，会发现画布上没有预想中的线，什么也没有。因为我们还少了一个步骤.lineTo其实是画的一条&路径&，本身是不可见的。如果要让他显示出来，我们必须对他进行&画&的操作。 用过PS的同学，肯定能知道图形的两种模式，一种是填充，另一种是描边。现在我们已经画了一条线，相当于PS中勾了一条路径，此时给路径描一下边，就能显示出图形了。 canvas描边的方法是stroke().现在让我们把代码补全： 复制代码 代码如下: ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.stroke();此时刷新，就能看到一条线了。当然，你也可以连续绘制出几百条路径，再执行描边动作，即可一下画出几百条线。现在我们来用4条线画一个矩形： 复制代码 代码如下: ctx.moveTo(100,100); 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.lineWidth = 10; 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.moveTo(100,100); 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.moveTo(100,100); 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。这个很特别，我把他放到下一篇文章讲吧
分享：今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象,感兴趣的朋友可以了解下
相关HTML5教程：
Div+Css教程搜索
HTML5教程推荐
猜你也喜欢看这些