详述canvas(一)

来源：互联网发布：少女时时彩计划软件编辑：程序博客网时间：2024/05/18 02:11

canvas标签，canvas的中文意思是”画布”，而它在网页中的表现，也是画布的角色。

<canvas width = "" height = "" >    您的浏览器不支持canvas,请升级或更换浏览器</canvas>

有些浏览器不支持canvas标签，此时就回看到canvas标签里的文字提示信息。
canvas的默认宽度是300px,默认高度是150px;
注意: canvas的宽度和高度设置要写在canvas标签中,不能通过CSS设置,通过CSS设置的宽高可以看作是缩放,如果缩放的太过随意,那么在canva上的画图也会变形。因此必须在canvas的标签中设置canvas的宽和高。

要在canvas上画图：
第一步是获取canvas标签
var canvas = docunment.querySelector(“#platte”);
第二步是设置canvas的绘图环境，目前仅支持2d绘图环境。
var palette = canvas.getContext(“2d”);//2d绘图环境

计算机屏幕，原点都是在左上角，Y轴向下表示正方形，canvas也是这样。
我们从画一条最简单的直线说开去：
在开始画之前，先拿出画布和画笔

var canvas = docunment.querySelector("#platte");//画布var palette = canvas.getContext("2d");//画笔

我们画画的时候，落笔点是不固定的，随时都会变。canvas虽然不是通过手来决定落笔点，但也有一个方法,就是moveTo。moveTo的作用相当于把笔尖提离画布，然后移动到指定的点（即坐标）。

palette .moveTo(x,y);//确定落笔点

开始画，我们要画的是直线，使用lineTo(x,y),当我们画线时,落笔点也跟着移动到lineTo的位置。

  palette.moveTo(50,50);  palette.lineTo(100,100);

但是,仅仅这样,并不会出现料想中的线,因为我们还少了一个步骤,lineTo画的其实是一条”路径”,本身是不可见的，如果要让它显示出来,我们还需要进行”画”的操作,使用stroke()或者是fill();因为我们是画一条直线，因此使用stroke描边。

  palette.moveTo(50,50);  palette.lineTo(100,100);  palette.stroke();

再刷新网页,就能看到线条了。
此外,因为canvas绘图过程,非常消耗资源,因此,如果想节省系统资源,提高效率,最好是绘制好所有的路径,再一次性填充或者是描边。

 palette.moveTo(50,50); palette.lineTo(100,100); palette.moveTo(150,150); palette.lineTo(200,200); palette.stroke();

默认的线条颜色是黑色,默认的线宽是1px;
通过lineWidth和strokeStyle可以修改线宽和线条颜色。
如：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #palette{background: #D5FF92;}    </style></head><body><canvas id = "palette" width="300px" height="300px"></canvas></body></html><script>    var palette = document.querySelector("#palette").getContext("2d");//设置绘图环境  palette.moveTo(100,100);    palette.lineTo(200,100);    palette.lineTo(200,200);    palette.lineTo(100,200);    palette.lineTo(100,100);    palette.lineWidth = 10;    palette.strokeStyle = '#FF0000';    palette.stroke();</script>

这里写图片描述

可以看到，左上角部分缺了一块。而且通过测量，可以发现，这个红色的正方形是110px*110px,而不是120px*120px;Canvas中的线条都有一条“中线”，这条中线位于line的绝对中间，线条的笔画以中线向两侧扩展。所以10px是向内侧和外侧各5px;这样就不难理解为什么结果是110px,而不是120px了。也正是因为这个原因，左上角出现缺角就理所当然了。因为这里没有被画到。
这里写图片描述

其余的角之所以没有出现缺角，是因为，我们在画线的过程中，没有将画笔提起来，画笔是连续的。如果我们在个位置都将画笔提起来呢？

<script>    var palette = document.querySelector("#palette").getContext("2d");//设置绘图环境    palette.moveTo(100,100);    palette.lineTo(200,100);    palette.moveTo(200,100);    palette.lineTo(200,200);    palette.moveTo(200,200);    palette.lineTo(100,200);    palette.moveTo(100,200);    palette.lineTo(100,100);    palette.lineWidth = 10;    palette.strokeStyle = '#FF0000';    palette.stroke();</script>

这里写图片描述

可以看出每个角都出现了一个缺角。
回到第一个问题，如果修复这个缺角？实际上,出现这个问题的另一个原因是因为我们的路径没有闭合,此时，只是起点和重点重合，但是路径本身并没有闭合。我们试试看，加个closePath();

<script>    var palette = document.querySelector("#palette").getContext("2d");//设置绘图环境  palette.moveTo(100,100);    palette.lineTo(200,100);    palette.lineTo(200,200);    palette.lineTo(100,200);    palette.lineTo(100,100);    palette.closePath();    palette.lineWidth = 10;    palette.strokeStyle = '#FF0000';    palette.stroke();</script>

再刷新网页,可以看到,缺角已经消失了。
这里写图片描述

上面的正方形角是尖的，如果我们希望是圆角，该如何做呢？
此时，需要借助于lineJoin属性，lineJoin的意思是线的交汇处，有三个属性值:miter(默认、尖角)、bevel(斜角)、 round(圆角)

<script>    var palette = document.querySelector("#palette").getContext("2d");//设置绘图环境    palette.moveTo(100,100);    palette.lineTo(200,100);    palette.lineTo(200,200);    palette.lineTo(100,200);    palette.lineTo(100,100);    palette.closePath();    palette.lineWidth = 10;    palette.strokeStyle = '#FF0000';    palette.lineJoin = "round";    palette.stroke();</script>

这里写图片描述

与lineJoin类似的一个属性是lineCap,lineCap有3个属性值:butt(平,默认值),round(圆),square(方)
这里写图片描述

其实平头跟方头是一样的，区别只是平头没有伸出去那么一截。圆头和方头都会伸出去一截，这一节是多长呢？就是线条宽度的一半。
最后需要说明的是：闭合路径没有端点,所以闭合的路径看不到端点的样式.

了解一下canvas中两个重要的方法：beginPath()和closePath();
beiginPath()开始一段新路径
canvas中的绘制方法(如stroke,fill),都是以”上一次的beiginPath”之后的所有路径为基础进行绘制。
如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #palette{background: #D5FF92;}    </style></head><body>    <canvas id = "palette" width="300px" height="300px"></canvas></body></html><script>    var palette = document.querySelector("#palette").getContext("2d");//设置绘图环境  palette.beginPath();    palette.moveTo(50,20);    palette.lineTo(250,20);    palette.stroke();    palette.moveTo(50.5,40.5);    palette.lineTo(250.5,40.5)    palette.strokeStyle = '#f00';    palette.stroke();</script>

得到的是两条红线,而并非是一条黑线,一条红线。
并且,仔细观察,我们还会发现,第一条直线的宽度要比第二条宽度要宽。这是因为canvas的每条线都有一条无限细的中线,线条的宽度是从中线向两侧延伸的,因为计算机是不允许小于1px的图形的,因此延伸后的宽度变成了2px.Canvas中的line把中线与像素的起点对齐了，而不是像素的中间点。为了解决这个问题,我们让线条的中线和像素的中间点对齐,如本例中的第二条曲线的画法。另外,对于lineWidth>1的线,我们可以忽略这个问题,只有线宽为1px的时候,这个问题最明显。
这里写图片描述

不管你用moveTo把画笔移动到哪里，只要不beginPath，那你一直都是在画一条路径。
fillRect与strokeRect这种直接画出独立区域的函数，也不会打断当前的path.
如果你画出的图形和你想像的不一样，记得查看是否有合理的

说到beiginPath,就不得不提及closePath();
必须要注意的一点是:closePath()的作用不是结束路径,而是关闭路径,它会试图从当前路径的重点连一条路径到起点,让整个路径闭合起来。但是,这并不意味着它之后的路径就是新路径了。
如上面的例子,即使我们在第一个stroke之后,加上一句closePath()也不会出现一红一黑的线,但是如果我们在第一个stroke之后,加上一句beginPath(),可以如愿以偿的得到2个
不要企图通过闭合现有路径来开始一条新路径，而开始一条新路径，以前的路径也不会闭合。
因此在适当的地方开启新路径和闭合路径。

3 0