您的位置：首页 > 其它

详述canvas(一)

2016-04-25 16:05 441 查看
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个

不要企图通过闭合现有路径来开始一条新路径，而开始一条新路径，以前的路径也不会闭合。

因此在适当的地方开启新路径和闭合路径。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航