Canvas（画布）的使用_canvas画布的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_56839193/article/details/121077050

1 关于Canvas（画布）

<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML元素.例如,它可以用于绘制图表、制作图片构图或者制作动画. 下边的图片展示了一些的实现示例。

<canvas>最早由Apple引入WebKit，用于Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。

2 准备工作

2.1 添加一个Canva

在HTML中添加Canvas非常简单，只需要在HTML的部分，添加上 <canvas> 标签就可以了！

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
</canvas>
</body>
 </html>

canvas元素和img元素很像，都有src 和 alt 属性，以及width和height属性。当没有设置canvas的宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block;
margin: 50px auto;" width="800" height="600">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
</canvas>
</div>
</body>
</html>

2.2 获取canvas对象

画画首先需要啥？画笔啊。获取canvas画笔也是一句话的事情，就是直接使用刚才获得的canvas对象，调用它的 getContext("2d") 方法，即可。

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

这里的context便是画笔了。 context 上下文

2.4 小结准备工作只有三步：

1. 布置画布：通过添加标签，添加canvas元素

2. 获取画布：通过标签的id，获得canvas对象

3. 获得画笔：通过canvas对象的 getContext("2d") 方法，获得2D环境

3 绘制线段

使用canvas画线条和现实中画画差不多：

移动画笔，使画笔移动至绘画的开始处
确定第一笔的停止点规划好之后，
选择画笔（包括画笔的粗细和颜色等)
确定绘制

因为Canvas是基于状态的绘制（很重要，后面会解释），所以前面几步都是在确定状态，最后一步才会具体绘制

3.1 移动画笔(moveTo())

之前我们获得了画笔 context ，所以以此为例，给出改方法的使用实例—— context.moveTo(100,100) 。这句代码的意思是移动画笔至(100,100)这个点（单位是px）。这里是以 canvas 画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右。

3.2 笔画停点(lineTo())

同理， context.lineTo(600,600) 。这句的意思是从上一笔的停止点绘制到(600,600)这里。不过要清楚，这里的 moveTo() 和 lineTo() 都只是状态而已，是规划，是准备要画，还没有开始画，只是一个计划而已！

3.3 选择画笔

这里我们暂且只设置一下画笔的颜色和粗细。 context.lineWidth = 5 ，这句话的意思是设置画笔(线条)的粗细为10px。 context.strokeStyle = "red" ，这句话的意思是设置画笔(线条)的颜色为红色。因为Canvas是基于状态的绘制，所以我们在选择画笔粗细和颜色的同时，其实也是选择了线条的粗细和颜色。

3.4 确定绘制

确定绘制只有两种方法， fill() 和 stroke() ，前者是指填充，后者是指描边。因为我们只是绘制线条，所以只要描边就可以了。调用代码 context.stroke() 即可。

<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.moveTo(100,100);
context.lineTo(600,600);
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
}
</script>