首页 > 代码库 > 使用canvas来绘制图形

使用canvas来绘制图形

2024-11-26 14:48:02   204人阅读

一个简单例子

一开始，让我们来看个简单的例子，我们绘制了两个有趣的长方形，其中的一个有着alpha透明度。

我们将在接下来的例子里深入探索一下这是如何工作的。

<html>

<head>

<script type="application/javascript">

function draw() {

var canvas = document.getElementById("canvas");

if (canvas.getContext) {

var ctx = canvas.getContext("2d");

?

ctx.fillStyle = "rgb(200,0,0)";

ctx.fillRect (10, 10, 55, 50);????

?

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

ctx.fillRect (30, 30, 55, 50);

}

}

</script>

</head>

<body onl oad="draw();">

<canvas id="canvas" width="150" height="150"></canvas>

</body>

</html>

例子看起来像是这样：:

Screenshot

Live sample

技术分享

?

?

栅格

技术分享

? 在我们开始画图之前，我们需要了解一下画布栅格（canvas grid）以及坐标空间。上一页中的HTML模板中有个宽高150px的canvas元素。如右图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（Y轴）x像素，距离上边（X轴）y像素（坐标为（x,y））。在课程的最后我们会平移原点到不同的坐标上，旋转网格以及缩放。现在我们还是使用原来的设置。

绘制矩形

不同于SVG，HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。

首先，我们回到矩形的绘制中。canvas提供了三种方法绘制矩形：

fillRect(x, y, width, height)

绘制一个填充的矩形

strokeRect(x, y, width, height)

绘制一个矩形的边框

clearRect(x, y, width, height)

清除指定矩形区域，让清除部分完全透明。

上面提供的方法之中每一个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。

矩形（Rectangular）例子

function draw() {

  var canvas = document.getElementById(‘canvas‘);

  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);

  }

}

该例子的输出如下图所示。

Screenshot

Live sample

技术分享

?

不同于下一节所要介绍的路径函数（path function）,以上的三个函数绘制之后会马上显现在canvas上，即时生效。

绘制路径

使用路径绘制图形需要一些额外的步骤。首先，需要生成路径。然后再路径上使用绘图命令绘制。之后闭合路径。一旦路径生成，你就能通过描边或填充路径来渲染图形。以下是所要用到的函数：

beginPath()

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()

闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()

通过线条来绘制图形轮廓。

fill()

通过填充路径的内容区域生成实心的图形。

生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。

?注意：当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论最后的是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

第二步就是调用函数指定绘制路径，本文稍后我们就能看到了。

第三，就是闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

?

绘制一个三角形

例如，绘制三角形的代码如下：

function draw() {

  var canvas = document.getElementById(‘canvas‘);

  if (canvas.getContext){

    var ctx = canvas.getContext(‘2d‘);

?

    ctx.beginPath();

    ctx.moveTo(75,50);

    ctx.lineTo(100,75);

    ctx.lineTo(100,25);

    ctx.fill();

  }

}

输出看上去如下：

使用canvas来绘制图形


联系
我们