canvas系列教程02-直线和曲线

最新推荐文章于 2024-04-10 16:05:41 发布

原创

最新推荐文章于 2024-04-10 16:05:41 发布 · 367 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #canvas #javascript #开发人员

本文深入探讨HTML5 Canvas中绘制直线和曲线的常见问题及解决方法，通过实例代码解析如何避免图形变形，并展示了使用quadraticCurveTo和bezierCurveTo创建优美曲线的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇文章我们搭建了基础环境，然后画了个矩形玩了玩，至于如何画矩形线框之类的，这些看看手册就行了，没啥复杂的，参数搞对单词别拼错就OK.

这篇文章说下常见的坑和我们常用资料又比那些基础的线框实用些的曲线。

啥也不说，先上一梭子代码。

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
canvas{
width:800px;
height: 600px;
margin: 0 auto;
border: 1px solid #000;
display: block;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oC = document.querySelector('#c1');
var gd = oC.getContext('2d');
gd.beginPath();//忽略以前的画的的东西从新开始
gd.moveTo(30,30);
gd.lineTo(30,100);
gd.lineWidth = 10;//注意不加px
gd.strokeStyle = 'aqua';//神一样的颜色
gd.stroke();

};
</script>

</head>
<body>
<canvas id="c1" width="300" height="300"></canvas>
</body>
</html>

```

moveTo ,lineTo，设个宽度颜色一stroke（描边），完事儿。

好了，我告诉上面的例子是坑爹玩意，直接上坑。

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
canvas{
width:800px;
height: 600px;
margin: 0 auto;
border: 1px solid #000;
display: block;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oC = document.querySelector('#c1');
var gd = oC.getContext('2d');
gd.beginPath();//忽略以前的画的的东西从新开始
gd.moveTo(30,30);
gd.lineTo(200,200);
gd.lineWidth = 10;//注意不加px
gd.strokeStyle = 'aqua';//神一样的颜色
gd.stroke();

};
</script>

</head>
<body>
<canvas id="c1" width="300" height="300"></canvas>

</body>
</html>

```

是不是发现图形变形了，我不想解释太多为什么，记住就好了，还是那句话，你先会用canvas画写简单的东西，比如饼图，比如画个棋盘，比如做个ps里面的去色之类的，基础东西不会之前扯理论和名词都是装13.

只说结果，不要在样式里面定义canvas的宽高，直接标签里面定义，解决方案上，

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
canvas{
margin: 0 au