Canvas API 的基本用法

关注

发布于: 1 小时前

首先可以想象：如果要在现实中画一幅图像，需要什么工具？首先，需要一个画布，然后需要一支笔。在网页上，画布 Canvas 是 HTML 中的元素，可以使用 Canvas 标签来创建画布：

<html>    <body>        <canvas></canvas>    </body></html>

复制代码

与常规元素一样，该元素也是一个矩形容器，可以给它添加一些 CSS 样式：

<!DOCTYPE html><html><head>  <style>    canvas {      background-color: black;    }  </style></head><body>  <canvas></canvas></body></html>

复制代码

设置宽度和高度

任何画布都有尺寸，这里没有设置 Canvas 的大小，Canvas 的默认宽度是 300 像素，高度是 150 像素。

可以直接在 HTML 标签中设置其宽度和高度，也可以通过 JavaScript 代码设置宽度：

在 HTML 标签中设置宽度和高度：

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

复制代码

在 JavaScript 中：

const canvas = document.getElementById("canvas"); canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight;

复制代码

笛卡尔坐标系

现在来了解坐标系的概念，在绘制图形时，需要知道每个点的位置。为了准确描述每个点的位置，Canvas 中引入了笛卡尔坐标系。

在画布中，以左上角的点为原点，水平方向为 x 轴，垂直方向为 y 轴。

如果上面画布的大小是 300 * 300，那么右下角的点应该是(300, 300)。

这是一个非常重要的概念。稍后绘制时，实质上是在不同点之间移动画笔。

画一条线

在设置 Canvas 的大小和颜色之前，现在绘制一些最简单的图形。

实际上，如果需要绘画，也需要一支笔，在 Canvas 中，可以通过这样的代码得到一个画笔。

const canvas = document.getElementById("canvas");const context = canvas.getContext("2d");

复制代码

这个上下文对象可以看作是一支笔，这里想象一下在现实中是如何画线段的：

首先需要将笔放在画布上的某个坐标上，然后需要将笔移动到另一个坐标。在 JavaScript 中也是如此，这是一个代码片段：

context.beginPath();context.moveTo(50,50);context.lineTo(100,100);context.strokeStyle = '#fff';context.stroke();

复制代码

好了，上面是 Canvas 的基本用法，具体的后续在继续增加学习笔记。

发布于: 1 小时前阅读数: 5

原文链接:【http://xie.infoq.cn/article/c706c04189d34ff3486d1476e】。

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发，用技术创造价值！

发布

暂无评论

创作场景

Canvas API 的基本用法

设置宽度和高度

笛卡尔坐标系

画一条线

devpoint

评论