[笔记][HTML][JavaScript]canvas的基本用法(1)-来绘製一些简单的图形吧！

大家好啊！又到了每週一次的动头脑...不对！这礼拜没有了，哈哈哈，前一阵子啊，小弟我参加了一个活动(在这里)，主要是在九个礼拜的时间，每个礼拜都会出一个主题让大家练习前端的能力，现在还剩下最后两週，大家还来得及去报名XD，好啦！以上是题外话，主要是这礼拜的题目非常有趣，他要用canvas去做出一个游戏，设计稿在这里，第一次看到真的差点闪尿，不过还是很认命的找资料慢慢画，既然机会难得，就把这次的学习纪录起来吧！

首先canvas他是HTML的原生标籤之一，我们可以透过JS把它当作一个白板，在上面绘製各种图案以及动画，至于要怎么做呢？可能需要一点数学公式、三角函数、圆周角定理...欸！等等！先不要按上一页，其实那一些我也都不太懂，哈哈哈，我们需要做的是跟着感觉走XD，走久了就知道怎么做是对的了，哈哈，那介绍完后(其实根本没介绍什么XD)我们开始实作！

首先，就像其他HTML标籤一样，想要canvas就先下一个canvas标籤吧！

<canvas id="myCanvas"></canvas>

OK！那我们就完成HTML的建置作业了！接下来就是JavaScript的主场了，首先我们先去找到canvas标籤。

//这一行去抓取canvas的标籤let canvas = document.getElementById("myCanvas");//接着指定绘图方式let ctx = canvas.getContext("2d");//让canvas的高度和宽度等于整个画面，让整个视窗都是你的画布canvas.height = window.innerHeight;canvas.width = window.innerWidth;

接着建置作业完成，就可以在上面画画了！那我们来看一下怎么画吧！

首先是线：

//在绘製任何东西之前，我们都要来个开始，像全天下所有的故事一样ctx.beginPath();//我们用moveTo(x,y)来指定线的起点座标ctx.moveTo(50,50)//之后使用lineTo(x,y)来指定与前一个座标相连的点ctx.lineTo(100,50)//用stroke()来绘製相连点的线ctx.stroke()

上方的程式码应该会出现下图的结果，也就是一条水平线：

可以观察出来座标的(x,y)是以左到右，由上而下越来越大，就像一般网页的布局一样，这个观念会用到以后所有的图形，所以要好好记着哦！

再来我们试着把刚刚的线给围成一个三角形(上一段的注解我就先拿掉了)！

ctx.beginPath();ctx.moveTo(50,50)ctx.lineTo(100,50)ctx.lineTo(50,100)//在用lineTo()把线连回原点的位置，围成三角形ctx.lineTo(50,50)/*而除了在连回原点外，也可以使用closePath()他会把最后一个点及起点座标相连，上下两行择一就行了！*/ctx.closePath()ctx.stroke()

上方程式码会呈现出如下的三角形：

现在的他是黑白的，我们来为他填上色彩和加粗线调宽度吧！

//使用lineWidth指定线条宽度ctx.lineWidth = 3//使用strokeStyle指定线条颜色ctx.strokeStyle = "#0000FF"//用fillStyle指定填满色彩ctx.fillStyle = "#FF0000"ctx.beginPath()ctx.moveTo(50,50)ctx.lineTo(100,50)ctx.lineTo(50,100)ctx.closePath()//用fill()填满围起来的範围ctx.fill()ctx.stroke()

我们经过上面的调整，得到的三角形会变成下方的样子。

顺带一提，如果在没有围起来的範围使用fill()是一点用都没有的哦！

那线画完后，我们来学着怎么画四角形吧！虽然也可以使用以上的方式处理，但是canvas在四角形部分已经有现成的函数了：

ctx.beginPath()//沿用宽度及色彩设定ctx.lineWidth = 3;ctx.strokeStyle = "#0000FF"ctx.fillStyle = "#FF0000"/*使用rect(x,y,w,h)绘製四角形x,y一样是座标，w和h是四边形的宽和高*/ctx.rect(50,50,80,100);ctx.fill()ctx.stroke()

使用rect()就可以直接指定坐标及宽高，不需要再指定四个点来用线连起来！现在我们会得到下方的四角形：

这边我再PS一下，使用rect()来画四角形的话，如果没有接着stroke()就不会有框线，没有fill()就不会填满，感觉在说废话，哈哈，不过他们并不是必要的，只是和线不一样的是stroke()和fill()可以择一使用。然后是关于座标，他会以四角形的左上角去对齐指定的座标！

最后我们来画圆吧！这边用的是arc()来处理：

ctx.beginPath()//沿用宽度及色彩设定ctx.lineWidth = 3;ctx.strokeStyle = "#0000FF"ctx.fillStyle = "#FF0000"/*使用arc(x,y,r,s,e)画一个圆x,y是圆心的座标，r是半径，s和e是起点和终点的角度*/ctx.arc(50,50,25,0,Math.PI*2)ctx.fill()ctx.stroke()

arc()的第4和5的参数是指从几度开始的角度，在上方的程式码中从0度开始，绘製出360度的圆，因为Math.PI是代表180度，乘上2就变成360度，所以从0度开始绘製360度就是一个完整的圆了！所以如果要半圆就把arc()内改成ctx.arc(50,50,25,0,Math.PI)，就是一个半圆弧形了！我们先看一下目前的圆形及arc()的角度概念吧！

上方右边的图，简单说明了arc()的起点角度及终点角度(真的很简单XD)，所以如果我要画一个，像月亮那样左半边的圆，起点就从90度开始，到上方的270度ctx.arc(50,50,25,Math.PI/2,Math.PI*1.5)就会出现一个左半圆了！

讲到这里，感觉应该要实作画出一些东西，当作文章的结尾才算完整，那我们来画一颗神奇宝贝球吧！

let canvas = document.getElementById("myCanvas")let ctx = canvas.getContext("2d")canvas.height = window.innerHeightcanvas.width = window.innerWidth;//画一个下半圆，指定颜色为白色ctx.beginPath()ctx.lineWidth = 3;ctx.fillStyle = "#FFFFFF"ctx.arc(100,100,50,0,Math.PI)ctx.fill()ctx.stroke()//画一个上半圆，指定颜色为红色ctx.beginPath()ctx.fillStyle = "#FF0000"ctx.arc(100,100,50,Math.PI,Math.PI*2)ctx.fill()ctx.stroke()//画中间的线和圈圈，指定颜色为白色ctx.beginPath()ctx.fillStyle = "#FFFFFF"//从圆的左边开始ctx.moveTo(50,100)//连到中间后接着一个上半圆ctx.arc(100,100,10,Math.PI,Math.PI*2)//绕过去后再画一条直线到圆的右边ctx.lineTo(150,100)//最后沿着线绕回来画一个下半圆ctx.arc(100,100,10,0,Math.PI*2)ctx.fill()ctx.stroke()//画一个圆形，中间的那个圈圈按钮ctx.beginPath()ctx.arc(100,100,5,0,Math.PI*2)ctx.stroke()

成品如下：

用上面的技巧就可以画出一些简单的图形了，下一次我们再来实作关于动画的部分，到时候整个网页就会自己动起来了哦！

那关于这篇文章因为也打得满晚的，怕会有一些地方没有注意到或是有问题的，再麻烦各位大大留言告诉我，我一定会马上修正的！另外如果有解释不清楚的地方也欢迎留言问我！小弟会尽力找出解答的！谢谢大家观看