关于HTML5中的Canvas

一，Canvas是什么

Canvas  是 HTML5 中新增加的  API  用于网页实时的生成图像，，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的图片。

二，Canvas什么用

为了可以直观的观察到Canvas的存在，我们将Body的background设置为黑色，将Canvas的background设置为黑色

<style>
    body {
	width: 100%;
	height: 100%;
	background: black;
    }
			
    canvas {
	background: #fff;
    }
</style>

在HTML标签中输入<canvas>标签，并且直接在标签中的设置宽度和高度。*注意Canvas标签的样式应该直接使用它自带的如下图

<canvas id="canvas" width="300" height="300"></canvas>

在输入完上述的代码后会得到以下效果

 以上就是Canvas的HTML演示布局

三， 使用Canvas绘制矩形

 

那么，我们想在canvas上面画出矩形，我们就需要认识以下几种api

方法	描述
getContext()	获取绘图环境，可选参数"2d"
fillRect(x,y,width,height)	绘制一个填充的矩形
strokeRect(x,y,width,height)	绘制一个矩形的边框
clearRect(x,y,width,height)	清除指定矩形区域。

<script>
	var oC = document.getElementById("canvas")//获取标签Canvas
	var oGC = oC.getContext("2d")//使用它只带的属性
	oGC.fillRect(50.5,50.5,100,100)//第一个值是X轴，第二个值是Y轴
	oGC.fillRect(150.5,50.5,100,100)//第三个和第四个值是设置的宽度和高度的
	oGC.fillRect(250.5,50.5,100,100)
</script>

输入上述代码获得以下效果*注意在canvas的坐标轴的轴心在左上角而且Y轴是向下为正

 四，使用Canvas绘制圆形

我们来看下如何在canvas中绘制一个圆形，绘制圆形分为4个步骤。

         1)      开始绘制路径(beginPath)

         2)      创建图像路径

         3)      路径创建完成后，关闭路径

         4)      设定绘制样式，调用绘制方法，绘制路径(closePtah)

绘制圆形,canvas也为我们提供了arc这个方法

ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)

该方法有6个参数，x为绘制圆形的起点横坐标，y表示绘制圆形的起点的纵坐标,radius表示圆的半径，startAngle为开始角度，endAngle为结束的角度, anticlockwise是否按照顺时针方向进行绘制。false表示顺时针。（默认为顺时针）。 

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境
ctx.beginPath()
ctx.arc(100,100,50,0,90*Math.PI/180,false)
ctx.stroke()
ctx.closePath()

其中有个弧度转换的公式：degreens*Math.PI/180，绘制圆形默认按照以下的位置进行切换。

五，用Canvas绘制路径

我们可以使用moveTo()和lineTo()绘制直线，或者是自己想要的图形，不局限于矩形。

方法	描述
moveTo(x,y)	不绘制，只是将当前位置移动到新的目标点
lineTo(x,y)	不仅将当前位置移动到新的目标点(x,y)，而且在两个坐标之间画一条直线。
linejoin	设置两线段连接处所显示的样子。round,bevel,miter
lineCap	线段端点显示的样式
save	保存绘画路径
restore	销毁路径

*我们使用两个方法的时候，要注意使用closePath()闭合。因为它会通知canvas当前绘制的图形已经闭合或者形成了完全封闭。

下面是一个等腰三角型的代码

<script>
	var oC = document.getElementById("canvas")
	var oGC = oC.getContext("2d")
	oGC.beginPath()
	oGC.moveTo(100,100)
	oGC.lineTo(200,200)
	oGC.lineTo(300,100)
	oGC.closePath()
	oGC.stroke()
</script>

下面是效果图

暂时学到这里下星期更新，谢谢观看