您的位置:首页 > 其它

跟我学canvas (二 绘制图形)

2012-03-12 10:59 218 查看


在真正开始之前,我们需要先探讨 canvas 的网格(grid)或者坐标空间(coordinate space)。在前一页的HTML模板里有一个150像素宽, 150像素高的 canvas 对象。我在画面上叠加上默认网格,如右图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角(坐标(0,0))。画面里的所有物体的位置都是相对这个原点。这样,左上角的蓝色方块的位置就是距左边x像素和距上边Y像素(坐标(x, y))。后面的教程中我们将学会如何把移动原点,旋转以及缩放网格。不过现在我们会使用默认的状态。canvas 只支持一种基本形状——矩形,所以其它形状都是有一个或多个路径组合而成。还好,有一组路径绘制函数让我们可以绘制相当复杂的形状。

矩形 Rectangles

我们首先看看矩形吧,有三个函数用于绘制矩形的:

fillRect(x,y,width,height) : Draws a filled rectangle
strokeRect(x,y,width,height) : Draws a rectangular outline
clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent


它们都接受四个参数,
x
y 指定矩形左上角(相对于原点)的位置,
width
height
是矩形的宽和高。好,实战一下吧。

绘制矩形的例子

function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');

ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}


出来的结果应该和下面的是一样的。
fillRect
函数画了一个大的黑色矩形(100x100),
clearRect
函数清空了中间 60x60 大小的方块,然后
strokeRect
函数又在清空了的空间内勾勒出一个 50x50 的矩形边框。在接下去的页面里,我们会看到和
clearRect
函数差不多另外两个方法,以及如何去改变图形的填充和边框颜色。

// document.write("哦,你的浏览器不支持canvas");
var canvas = document.getElementById('c1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');

ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
// ]]>
与下一节的路径函数不一样,这三个函数的效果会立刻在 canvas 上反映出来。

绘制路径

不像画矩形那样的直截了当,绘制路径是需要一些额外的步骤的。

beginPath()
closePath()
stroke()
fill()


第一步是用
beginPath
创建一个路径。在内存里,路径是以一组子路径(直线,弧线等)的形式储存的,它们共同构成一个图形。每次调用
beginPath
,子路径组都会被重置,然后可以绘制新的图形。

第二步就是实际绘制路径的部分,很快我们就会看到。

第三步是调用
closePath
方法,它会尝试用直线连接当前端点与起始端点来关闭路径,但如果图形已经关闭或者只有一个点,它会什么都不做。这一步不是必须的。

最后一步是调用
stroke
fill 方法,这时,图形才是实际的绘制到 canvas
上去。
stroke
是绘制图形的边框,
fill
会用填充出一个实心图形。

注意:当调用
fill
时,开放的路径会自动闭合,而无须调用
closePath


画一个简单图形(如三角形)的代码如下。

ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();


moveTo

moveTo
是一个十分有用的方法,虽然并不能用它来画什么,但却是绘制路径的实用方法的一部分。你可以把它想象成是把笔提起,并从一个点移动到另一个点的过程。它接受
x
y
(新的坐标位置)作为参数。当 canvas 初始化或者调用
beginPath
的时候,起始坐标设置就是原点(0,0)。大多数情况下,我们用
moveTo
方法将起始坐标移至其它地方,或者用于绘制不连续的路径。看看右边的笑脸,红线就是使用
moveTo 移动的轨迹。


绘制各种线条 Lines

我们用
lineTo
方法来画直线。
lineTo
方法接受终点的坐标(x,y)作为参数。起始坐标取决于前一路径,前一路径的终点即当前路径的起点,起始坐标也可以通过
moveTo
方法来设置。fill和 strok 绘三角形的区别,上面也提到过,使用fill路径会自动闭合,但使用 stroke 不会,如果不关闭路径,勾画出来的只有两边。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: