用canvas 画布放大 坐标会改变吗_前端图形学基础（一）——Canvas基础入门

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

我前面的很多文章和悟空问答中有提到前端图形学这个概念，从今天开始，我会输出一系列的关于前端图形学相关的知识。今天是第一篇，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.stroke();

})(document);

效果：

上面代码执行的结果

来解释一下代码：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、在canvas2d的世界里，中心点是画面的左上角 context.translate(canvas.width/2,canvas.height /2 );是将canvas中心点平移到了画布的正中心。

2、弧度和角度的换算关系 rad = Math.PI/180 * angle 这个公式非常重要，在canvas中经常会用到

3、三角函数正弦余弦的基础使用。

总结

canvas是前端图形学中最基础的部分，从上面的案例我们可以看出来，canvas和我们高中所以的数学是有一定的联系的，后面会有运动相关的知识运用，涉及到了运动那么肯定离不开物理了。也就是说，要想学好前端图形学，高中时期的物理和数学知识我们要回忆起来了哦。

未完待续……