canvas 入门

canvas是干什么的？

<canvas> 是HTML5中的标签，它是一个容器，可以使用JS在其中绘制图形或文字。所以我们把重点放在绘制图的api上。

关于canvas的宽高：
一般来说通过标签属性来自定义宽高，通过css设置会失帧。

关于canvas画画的方向：
Canvas 使用的是 W3C 坐标系 ，也就是遵循我们屏幕、报纸的阅读习惯，从上往下，从左往右。

canvas 绘制直线

初体验，通过起始点与折点画线

<!-- 创建canvas标签： -->
<canvas id="canvas" height="600" width="700"></canvas><script>// 使用JS获得这个canvas标签的DOM对象const canvas = document.getElementById('canvas')// 决定是画二维还是三维的画const ctx = canvas.getContext('2d')// 定义画线的起始点ctx.moveTo(20, 100)// 定义画线的折点ctx.lineTo(100, 100)// 通过线条来绘制图形轮廓ctx.stroke()
</script>    

使用ctx.beginPath() 与 ctx.closePath()。来分隔画的线，防止样式覆盖。

设置线条的样式：可以设置宽度、颜色、透明度等等。具体看api

<!-- 关于canvas的定义：<canvas> 是HTML5中的标签，它是一个容器，可以使用JS在其中绘制图形或文字。 --><!-- 关于canvas的宽高：可以通过标签属性来自定义宽高，通过css设置会失帧，不如直接定义。 --><!-- 关于canvas画画的方向：Canvas 使用的是 W3C 坐标系 ，也就是遵循我们屏幕、报纸的阅读习惯，从上往下，从左往右。--><!-- 创建canvas标签： -->
<canvas id="canvas" height="600" width="700"></canvas>
<script>// 使用JS获得这个canvas标签的DOM对象const canvas = document.getElementById('canvas')// 决定是画二维还是三维的画const ctx = canvas.getContext('2d')// 定义画线的起始点ctx.moveTo(20, 100)// 定义画线的折点ctx.lineTo(100, 100)// 通过线条来绘制图形轮廓ctx.stroke()// 绘制第二条ctx.moveTo(10, 300)ctx.lineTo(100, 300)ctx.lineTo(100, 200)ctx.lineTo(200, 200)ctx.lineTo(200, 300)ctx.lineTo(300, 300)ctx.lineTo(300, 200)ctx.lineTo(400, 200)ctx.lineTo(400, 300)ctx.lineTo(500, 300)ctx.stroke()// 绘制线的样式，设置后，整个canvas都使用这个样式// 设置线的宽度ctx.lineWidth = 10 // 设置线的颜色ctx.strokeStyle = "skyblue"ctx.stroke()// 设置后，整个canvas都一个颜色，明显不符合我们的需求。// 所以需要使用ctx.beginPath() 与  ctx.closePath()。// 所以上面的线都是一个样式。ctx.beginPath()ctx.moveTo(100, 400)ctx.lineTo(100, 700)// 设置线的颜色ctx.strokeStyle = "red"ctx.stroke()ctx.beginPath()ctx.moveTo(300, 400)ctx.lineTo(300, 700)// 设置线的颜色ctx.strokeStyle = "green"ctx.stroke()// 还有一些其他的样式：//strokeStyle = '颜色'：设置线的颜色；//lineWidth = 数字：设置线的宽度；//lineCap = 'round/butt/square'：设置线帽为圆型/默认/方形；//lineJoin = 'miter/round/bevel'：设置线段连接处为默认/圆形/平直形式；//globalAlpha = 数字：设置图案的透明度</script>

canvas画虚线

与画实线类似，多了一个函数setLineDash()，用于设置虚线的透明线段。

setLineDash()可以有多个参数。
一个参数就是设置透明的线段。
多个参数的时候，偶数代表实线，奇数代表透明度

<canvas id="canvas" height="600" width="700"></canvas>
<script>canvas = document.getElementById("canvas");ctx = canvas.getContext("2d")// 画虚线ctx.beginPath()ctx.lineWidth = 10ctx.strokeStyle = 'skyblue'ctx.moveTo(200, 200)ctx.lineTo(500, 200)// 10个虚线点ctx.setLineDash([10])ctx.stroke()ctx.beginPath()ctx.moveTo(200, 300)ctx.lineTo(500, 300)// 下标为偶数的项为实线，为奇数项为透明线段，数字的大小代表着线段的长度。// 第一个是1/4，第二个是3/4ctx.setLineDash([10, 30])ctx.stroke()ctx.beginPath()ctx.moveTo(200, 400)ctx.lineTo(500, 400)// 下标为偶数的项为实线，为奇数项为透明线段，数字的大小代表着线段的长度.// 第一、二、三个分别是2/9、 2/3、 1/9    ctx.setLineDash([10, 30, 5])ctx.stroke()
</script>

canvas 绘制三角形

画三角形的原理就是画几条线，然后连接到一块

<!-- 创建canvas标签： -->
<canvas id="canvas" height="600" width="700"></canvas>
<script>// 画三角形的原理就是画几条线，然后连接到一块const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()ctx.moveTo(200, 200) ctx.lineTo(500, 200)ctx.lineTo(500, 500)// 第四个点要和第一个点的坐标一致才能画出三角形ctx.lineTo(200, 200)// 设置线段颜色为红色ctx.strokeStyle = 'red' ctx.stroke()ctx.closePath()
</script>

canvas 绘制正方形

矩形分为空心矩形 与 实心矩形。
实心矩形通过 fillStyle 属性来填充。

空心矩形的两种实现方式：
一 用直线硬画
二 用相应的api

<!-- 创建canvas标签： --><!-- 空心矩形：实现方式是画线条 -->
<canvas id="canvas" height="600" width="700"></canvas><!-- 填充矩形：实现方式 fillStyle = '颜色' 且使用 fillRect() -->
<script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')// 画空心矩形// 方法一：用画线的方式ctx.beginPath()ctx.moveTo(200, 150)ctx.lineTo(500, 150)ctx.lineTo(500, 450)ctx.lineTo(200, 450)ctx.lineTo(200, 150)ctx.stroke()ctx.closePath()// 方法二：用画矩形的函数// 起点为(20,15)，宽400像素，高400像素ctx.beginPath()ctx.strokeRect(20, 15, 400, 400) ctx.closePath()// 画填充矩形ctx.beginPath()ctx.fillStyle = 'red'ctx.fillRect(50, 60, 100, 100) ctx.closePath()
</script>

canvas 绘制圆形、圆弧与椭圆

使用arc(x, y, radius, startAngle, endAngle, anticlockwise)方法生成⚪/⌒。

<canvas id="canvas" height="600" width="700"></canvas>
<canvas id="canvas2" height="600" width="700"></canvas>
<script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()// 使用arc(x, y, radius, startAngle, endAngle, anticlockwise)方法生成⚪/⌒。// 再使用stroke()方法绘制圆。// 不写anticlockwise项的话默认为顺时针ctx.arc(350, 300, 150, 0, [(Math.PI) / 180] * 360) // 如果此处改为使用fill()方法，那么将会绘制出填充的圆ctx.stroke() ctx.closePath()const canvas2 = document.getElementById('canvas2')const ctx2 = canvas2.getContext('2d')// 画一个圆弧ctx2.beginPath();ctx2.arc(350, 300, 150, 0, [(Math.PI) / 180] * 300, true) // (Math.PI) / 180 = 1°ctx2.stroke() ctx2.closePath()// 画圆弧的第二种方式// 定义线段的起点ctx2.beginPath();ctx2.moveTo(200, 300)// 切线交点坐标为(400,100)，结束点为(400,500)ctx2.arcTo(400, 100, 400, 500, 100) ctx2.lineWidth = 2ctx2.stroke()ctx2.closePath()	
</script>

画椭圆也用对应的api即可

<canvas id="canvas" height="600" width="700"></canvas>
<script>const cnv = document.getElementById('canvas')const ctx = cnv.getContext('2d')ctx.ellipse(350, 300, 100, 200, [(Math.PI) / 180] * 60, [(Math.PI) / 180] * 0, [(Math.PI) / 180] * 360, false)ctx.fillStyle = 'skyblue'ctx.fill()
</script>

canvas绘制文本

<canvas id="canvas" height="600" width="700"></canvas>
<script>const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()ctx.font = '50px Verdana';// strokeText(Text,left,top,[maxlength])ctx.strokeText('Hello Canvas!', 180, 320, 400)ctx.closePath()ctx.beginPath()ctx.font = '50px Verdana'// strokeText(Text,left,top,[maxlength])ctx.fillText('Hello Canvas!', 180, 420, 400)ctx.closePath()// 设置文本样式// .font方法可以设置文本大小和字体；// .textAlign：设置文本的对齐方式，可选left/right/center/start/end// textBaseline：决定了文本在垂直方向的对齐方式，可选alphabetic/top/hanging/middle/ideographic/bottom// .direction：设置文本的绘制方向，可选ltr(left to right)和rtl(right to left)// 右对齐文本：ctx.beginPath()ctx.font = '40px serif'ctx.textAlign = 'right'ctx.direction = 'ltr'ctx.strokeText('Hello Canvas!11', 350, 250, 400)ctx.beginPath()</script>

canvas绘制图片

<canvas id="canvas" height="600" width="700"></canvas>
<script>var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');// 创建一个图片对象：var img = new Image();img.src = 'http://panpan.dapanna.cn//image-20221009113426344.png';// 图片加载完成之后绘制图片：img.onload = function () {ctx.drawImage(img, 0, 0); // 在(0,0)处绘制原图}
</script>