canvas 入门

canvas是干什么的？

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>    

<!-- 关于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画虚线

<canvas id="canvas" height="600" width="700"></canvas>
<script>
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d")
	
	// 画虚线
    ctx.beginPath()
    ctx.lineWidth = 10
    ctx.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/4
    ctx.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 绘制正方形

<!-- 创建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 绘制圆形、圆弧与椭圆

<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 = 2
    ctx2.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>