Canvas学习笔记1

描述：

HTML5的canvas标签用于绘制图像（通过脚本，通常是JavaScript）。
不过，canvas元素本身没有绘制能力（它仅仅是图形的容器），必须使用脚本来完成实际的绘制任务。
getContext（）方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
提供完整的getContext(“2d”)对象的属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

canvas三要素：id、width、height（这里的宽高跟style是有区别的）
正常情况下，放在canvas标签内部的内容是不显示的。

例子

<canvas id="canvas1" width="600" height="600">
	这里的内容，正常情况下不显示
</canvas>

<script>
	// 1.找到画布对象
	var canvas1 = document.querySelector("#canvas1");
	// 2.上下文对象（画笔） 2d的意思是使用2d引擎，用来画平面的；；画3d是用 webgl
	var ctx = canvas1.getContext("2d");
	// 3.绘制一个长方形，参数是x坐标，y坐标，宽度，高度
	ctx.rect(50,50,300,300)
	// 4.设置画笔颜色
	ctx.fillStyle="aqua"
	// 5.填充
	ctx.fill()
	// 6.描边颜色和描边宽度
	ctx.lineWidth=20
	ctx.strokeStyle="salmon"
	// 7.描边
	ctx.stroke()
</script>

画路径（线条）

	// 1.找到画布对象
	var canvas1 = document.querySelector("#canvas1");
	// 2.上下文对象（画笔） 2d的意思是使用2d引擎，用来画平面的；；画3d是用 webgl
	var ctx = canvas1.getContext("2d");

	// 设置开始路径
	ctx.beginPath()
	// 设置绘制的起始点
	ctx.moveTo(50,50)
	// 设置经过某个位置
	ctx.lineTo(50,300)
	// 设置经过某个位置
	ctx.lineTo(300,300)
	// 设置结束路径，不关闭的话就是连起来画，而关闭之后就可以又开始画另外一个
	ctx.closePath()

	// 设置线条起始位置的样式，默认是butt 平直的
	ctx.lineCap = "round" //设置成圆角
	// 设置两线交汇处的角的样式，默认是miter 尖锐的
	ctx.lineJoin="round" //设置成圆角
	// 绘制路径
	ctx.strokeStyle="aqua"
	ctx.lineWidth=10
	ctx.stroke()
	// 继续使用填充就会在线段连接起来进行填充，这里的效果就是一个直角三角形
	// ctx.fill()

继续执行填充的效果

设置或返回最大斜接长度（有三个等级，即可选值1，2，3）

ctx.miterLimit = 2

画圆

	// 1.找到画布对象
	var canvas1 = document.querySelector("#canvas1");
	// 2.上下文对象（画笔） 2d的意思是使用2d引擎，用来画平面的；；画3d是用 webgl
	var ctx = canvas1.getContext("2d");

	// 画圆，参数x坐标，y坐标，半径，弧度开始（0表示水平x轴方向），弧度结束（2π就是一个圆），（可选）是否逆时针绘制
	ctx.arc(300,300,100,0,Math.PI,false) // 最后一个参数默认为false表示顺时针绘制

	ctx.fillStyle="bisque"
	ctx.fill()
	ctx.stroke()

画文本

	// 1.找到画布对象
	var canvas1 = document.querySelector("#canvas1");
	// 2.上下文对象（画笔） 2d的意思是使用2d引擎，用来画平面的；；画3d是用 webgl
	var ctx = canvas1.getContext("2d");

	// 设置字体大小和名称
	ctx.font="50px 微软雅黑"
	// 参数 文本内容，宽度，高度，
	ctx.fillText("hellworld",100,100) // 最后一个参数默认为false表示顺时针绘制
	
	// 阴影模糊度,颜色，偏移
	ctx.shadowBlur=20
	ctx.shadowColor="rgba(0,0,0,1)"
	ctx.shadowOffsetX = 10
	ctx.shadowOffsetY = 10
	
	// 设置描边内容
	ctx.strokeText("中午吃啥？",100,200)