使用canvas绘图的步骤（前端图形学基础）

小君 2023-08-04 13:03:32 811

使用canvas绘图的步骤（前端图形学基础）var canvas = document.querySelector('canvas');((document)=>{1、先获取Canvas元素var canvas ＝ document.querySelector('canvas'); 2、通过canvas标签对象获取画笔对象。var context = canvas.getContext('2d'); 这里面解释一下，可以理解为我们是要在平面上绘制图形。当然也可以填 webgl，那就是webgl的相关API了，这里不多赘述，我们用2d参数即可！

点击右上角的关注，不定期前端干货分享！！

我前面的很多文章和悟空问答中有提到前端图形学这个概念，从今天开始，我会输出一系列的关于前端图形学相关的知识。今天是第一篇，Canvas基础入门

Canvas是什么？

简单的介绍一下，canvas是由html5提供的一个新的标签，意思是画布。顾名思义，我们可以在其上面绘制图像。我们要想绘制图像，那么我们肯定要先有一支画笔。

Canvas画笔

画笔的获取方式:

1、先获取Canvas元素

var canvas ＝ document.querySelector('canvas');

2、通过canvas标签对象获取画笔对象。

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

这里面解释一下，可以理解为我们是要在平面上绘制图形。当然也可以填 webgl，那就是webgl的相关API了，这里不多赘述，我们用2d参数即可！

绘制一条线段

((document)=>{

var canvas = document.querySelector('canvas');

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

context.strokeStyle = '#f00';

context.moveTo(50 50);

context.lineTo(120 120);

context.lineWidth = 3;

上面代码执行的结果

来解释一下代码：context就是我们获取到的画笔对象，canvas绘图API所有的接口都是在这个context对象上。

context.strokeStyle 即设置线条的样式，这里我们设置成了红色。后面的moveTo、lineTo 大家从字面上理解就行。最后有一个context.stroke()，就是规定程序用线条的方式去绘制。

值得注意的是，我这里并没有设置canvas的宽高，也就是用的它默认的宽高，默认宽高为150*300，大家可以在canvas标签上直接设置widh和height属性，也可以通过js设置。特别要强调的是，千万不要用样式去给canvas设置样式，千万不要那么干。不然你的绘图可能会变形。这是个坑。我先踩为尽。

画一个圆弧

这里我们要用到的API是context.arc(x y r startang endAng isBack)方法。这个方法一共有6个参数，我来一一解释一下：

x：圆弧的x坐标

y：圆弧y坐标

r：圆弧的半径

startang：圆弧的起始角度，也就是说我们要从哪里开始下笔，如果是0，则正对3点钟方向

endang：圆弧的结束角度

isBack：是否是逆时针绘制，默认为true.（可选参数）

实战：

context.beginPath(); context.arc(200 50 30 0 Math.PI/2*3 false); context.stroke(); context.strokeStyle = '#000' context.beginPath(); context.arc(200 150 30 0 Math.PI/2*3 true); context.stroke(); context.beginPath(); context.arc(200 250 30 0 Math.PI*2 true); context.stroke();

效果：

使用canvas绘图的步骤（前端图形学基础）(1)