1 章节目录
- Canvas 简介
- 使用 Canvas 绘制图形
2.1. <canvas> 标签
2.2. 绘制线条
2.3 设置线条的样式
2.4 设置线条的路径 - Canvas 常用方法
3.1.canvas 绘制矩形
3.2 canvas 绘制圆形
3.3 canvas 绘制椭圆
3.4 canvas 绘制文本
3.5 canvas 渐变 - SVG 简介
4.1 什么是SVG ?
4.2 SVG优势
4.3 浏览器支持
4.4 SVG 与 Canvas 两者间的区别 - 使用 SVG 绘制基本图形
5.1 绘制矩形
5.2.2 绘制椭圆
5.3 绘制直线、折线、多边形
1 Canvas 简介
Canvas 表示画布，现实生活中的画布是用来作画的。
HTML5 中的 Canvas ：我们可以称它为“网页中的画布”。默认情况下，Canvas 是一块 300px*150px 的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。
利用 Canvas 实现绘画：Canvas 并不是通过鼠标绘画的，而是用户需要通过 JavaScript 来控制画布中的内容，例如添加图片、线条、文字等。
2 使用 Canvas 绘制图形
2.1 <canvas> 标签
使用 HTML5 中的 <canvas> 标签在网页中创建一个画布，语法格式如下：
<canvas id="canvas" width="400" height="300">
您的浏览器不支持canvas标签，请更新浏览器
</canvas>
上述代码定义了一个 id 为 canvas 的画布，并设置了画布的宽度为 400px，高度为 300px。
通过 JavaScript 的 getElementById() 方法获取到网页中的画布对象，代码如下所示：
var canvas = document.getElementById("canvas");
上述代码获取了 id 为 canvas 的画布，同时将获取的画布对象保存在变量 canvas 中。
context 对象：是画布的上下文，也叫做绘制环境，是所有的绘制操作 API 的入口。
context 对象可以使用 getContext() 方法获得，代码如下所示：
var context = canvas.getContext('2d');
上述代码中的参数
2d代表画笔的种类，表示二维绘图的画笔。如果想要绘制三维图，可以把参数替换为webgl。
2d：代表一个平面，绘制图形时需要在平面上确定起始点，也就是“从哪里开始画”，这个点需要通过坐标来控制。
Canvas 的坐标系：从最左上角 0,0 开始。x 轴向右逐渐增加，y 轴向下逐渐增加。
2.2 绘制线条
线的定义：线是所有复杂图形的组成基础，想要绘制复杂的图形，首先要从绘制线开始。
线的组成：在绘制线之前首先要了解线的组成。一条最简单的线由三部分组成，分别为初始位置、连线端点以及描边。
初始位置：在绘制图形时，我们首先需要确定从哪里下“笔”，这个下“笔”的位置就是初始位置。
在画布中使用 moveTo(x, y) 方法来定义初始位置，其中 x 和 y 表示水平坐标轴和垂直坐标轴的位置，中间用 , 隔开。x 和 y 的取值为数字，表示像素值（单位省略）。
设置初始位置的示例代码如下所示：
context.moveTo(x, y);
连线端点：在画布中使用 lineTo(x, y) 方法来定义连线端点。和初始位置类似，连线端点也需要定义 x 和 y 的坐标位置。
定义连线端点的代码如下所示：
context.lineTo(x, y);
描边：通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。
使用画布中的 stroke() 方法，可以实现线的可视效果。
设置描边的代码如下所示：
context.stroke();
绘制字母 M，效果如图：
步骤一：创建画布：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制字母M</title>
</head>
<body>
<canvas id="canvas" width="400" height="300">
您的浏览器不支持canvas标签，请更新浏览器
</canvas>
</body>
</html>
步骤二：绘制字母 M：
<script>
var canvas = document.getElementById('canvas'); // 获取canvas标签
var context = canvas.getContext('2d'); // 获得context对象
context.moveTo(10,100); // 定义初始位置
context.lineTo(30,10); // 定义连接线端点
context.lineTo(50,100); // 定义连接线端点
context.lineTo(70,10); // 定义连接线端点
context.lineTo(90,100); // 定义连接线端点
context.stroke(); // 描边
</script>
2.3 设置线条的样式
掌握设置线条的样式的方法，能够实现设置不同样式的线条。
设置线条宽度：使用 lineWidth 属性可以定义线的宽度，该属性的取值为数值（不带单位），以像素为计量。
设置线的宽度的示例代码如下所示：
context.lineWidth = 10;
以上代码设置了线的宽度为 10px。
设置描边颜色：使用 strokeStyle 属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色的英文名。
设置描边颜色的示例代码如下所示：
context.strokeStyle = '#f00';
context.strokeStyle = 'red';
最低0.47元/天 解锁文章
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
