canvas之一：绘制直线

清疚 2022-07-24 06:22 341阅读 0赞

canvas是html5中最激动人心的技术之一，使用它，可以在浏览器上绘制出各种酷炫的效果，但是呢，千里之行，始于足下，接下来我们就从画一条最简单的直线开始，话不多说，先上效果图：

![20160516104041182][]

代码如下：

<!DOCTYPE html>  
<html>  
<head lang="en">  
<meta charset="UTF-8">  
<title></title>  
</head>  
<body>  
<canvas id="canvas" style="border:1px solid \#aaa;display:block;margin:50px auto;"></canvas>  
<script type="text/javascript">  
window.onload = function()\{  
var canvas = document.getElementById("canvas");  
var context = canvas.getContext("2d");  
  
canvas.width = 1024;  
canvas.height = 768;  
  
context.moveTo(100,100);  
context.lineTo(700,700);  
  
context.lineWidth = 5;  
context.strokeStyle = "red";  
context.stroke();  
\}  
</script>  
</body>  
</html>

代码详解：

1.首先我们需要一个<canvas>标签来在浏览器上定义一张画布，id属性是为了让js代码能够找到它，style属性为画布设置一些样式。

2.然后我们要在js中获取这个canvas对象，var canvas = document.getElementById("canvas")这行代码就是啦！

3.接下来再使用var context = canvas.getContext("2d")获取到canvas的绘图上下文，这个东西有什么用呢？以后绘图我们都要通过它来进行哦~

4.我们通过context.moveTo(100,100)把画笔移动到(100,100)这个点开始进行绘制。

5.context.lineTo(700,700)表示在上个点和这个点(700,700)直接画一条直线。

6.context.lineWidth = 5和context.strokeStyle = "red"这两行设置了画笔的一些属性：线条的宽度和颜色。

7.做完以上步骤以后，实际上我们只是设置好了绘制一条直线所需的所有状态，但此时画布上仍然是一片空白，关键的一步在这里：context.stroke()，它实实在在地在画布上画出了一条直线给我们看，感觉很酷炫有木有~

[20160516104041182]: /images/20220722/62a31e60c89d4ad0bbd40e8304134767.png