重看Javascript高级程序设计，第15章:使用Canvas绘图

1. 理解Canvas元素
2. 绘制简单的2D图形
3. 使用WebGL绘制3D图形

1.基本语法

			如果不支持将显示这些信息
		
		

2.2D上下文

3.绘制路径

//2d上下文会细分为填充和描边操作.这两个操作的结果取决于:fillStyle和strokeStyle,默认值为:#000000
			var d1 = document.getElementById('drawing')
			var c1 = d1.getContext('2d') 
			c1.strokeStyle = "red"
			c1.fillStyle = "#0000ff"
			
			//写到页面里
			var url = d1.toDataURL('image/png')
			var image = document.createElement('img')
			image.src = url
			document.body.appendChild(image)
			
			//绘制矩形	相关方法包括fillRect(),strokeRect(),和clearRect()
			var d2 = document.getElementById('d2')
			var c2 = d2.getContext('2d')
			//绘制红色矩形
			c2.fillStyle = "red"
			c2.fillRect(10,10,50,50)
			//绘制半透明的蓝色矩形
			c2.fillStyle = "rgba(0,0,255,.6)"
			c2.fillRect(30,30,50,50)
			
			//描边
			c2.strokeStyle = "aqua"
			c2.strokeRect(10,10,50,50)
			//半透明描边
			c2.strokeStyle = "rbga(0,255,0,.6)"
			c2.strokeRect(30,30,50,50)
			//clearRect用于清除画布上的矩形区域
			c2.clearRect(40,40,10,10)
			
			//绘制路径	绘制路径首先必须调用beginPath.表示开始新路径
			var d3 = document.getElementById('d3')
			var c3 = d3.getContext('2d')
			//开始路径
			c3.beginPath()
			//绘制外圈
			//arc以100,100为圆心绘制一条弧线,弧线半径为99,起始和结束角度分别为0和2*Math.PI,最后的参数为是否顺时针计算,false为顺时针
			c3.arc(100,100,99,0,2 *Math.PI,false)
			//绘制内圆
			c3.moveTo(194,100)		//将绘图游标移动到194,100,不画线.
			//arc以100,100为圆心绘制一条弧线,弧线半径为94起始和结束角度分别为0和2*Math.PI,最后的参数为是否顺时针计算
			c3.arc(100,100,94,0,2 * Math.PI,false)
			//绘制分针
			c3.moveTo(100,100)		//将绘图游标移动到100,100.不画线
			c3.lineTo(100,15)		//从上一点开始绘制一条直线,直到100,15停止
			//绘制时针
			c3.moveTo(100,100)		//将绘图游标移动到100,100,不画线
			c3.lineTo(35,100)		//从上一点开始绘制一条直线,知道35,100停止
			//填充 
			//描边路径
			c3.stroke()				//上面绘制的路径进行描边,所以就绘制出来了图形
			
			//isPointInPath()		//接收x和y坐标为参数,用于在路径被关闭之前确定画布上的某个点是否位于路径上
			if(c3.isPointInPath(100,100)){
				// alert('Point 100x100 在路径里')
			}
			
			//绘制文本
			//绘制文本的主要方法为fillText和strokeText
			//上面两个方法都接收4个参数:要绘制的文本字符串,x和y坐标和可选的最大像素度.
			
			//给上面的表盘加上数字
			c3.font = 'bold 14px Arial'
			//文本水平方向
			c3.textAlign = 'center'
			//文本基线,也就是垂直方向
			c3.textBaseline = "middle"
			//将12这个文本字符串绘制到100,20上
			c3.fillText("12",100,20)
			
			//起点对齐
			c3.textAlign = 'start'
			c3.fillText('12',100,40)
			
			//终点对齐
			c3.textAlign = "end"
			c3.fillText('12',100,60)
			
			var fontSize = 100;
			c1.font = fontSize + 'px Arial'
			while(c1.measureText('Hello World!').width >140){
				fontSize--
				c1.font = fontSize + 'px Arial'
			}
			c1.fillText('Hello World',10,10)
			c1.fillText('Font size is ' + fontSize + 'px',10,50)

//如下方法可以修改变化矩阵
			//rotate(angle)								围绕原点旋转图像angle弧度
			//scale(scaleX,scaleY)	 					缩放图像,在X方向乘以scaleX,在Y方向乘以scaleY,scaleX和scaleY默认值都是1.0
			//translate(x,y)							将坐标原点移动到x,y.执行这个变换之后,左边0,0会变成之前由x,y表示的点
			//transform(m1_1,m1_2,m2_1.m2_2,dx,dy)		直接修改变换矩阵,方式是乘以如下矩阵.
			//setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy)	将变化矩阵重置为默认状态，然后在调用transform()
			var d1 = document.getElementById('d1')
			var c1 = d1.getContext('2d')
			//开始路径
			c1.beginPath()
			//绘制外圆
			c1.arc(100,100,99,0,2 * Math.PI,false)
			//绘制内圆
			c1.moveTo(194,100)
			c1.arc(100,100,94,0,2 * Math.PI,false)
			//变换原点
			c1.translate(100,100)
			//旋转表针
			c1.rotate(1)
			//绘制分针
			c1.moveTo(0,0)
			c1.lineTo(0,-85)
			//绘制时针
			c1.moveTo(0,0)
			c1.lineTo(-65,0)
			//描边路径
			c1.stroke()
			
			var d2 = document.getElementById('d2')
			var c2 = d2.getContext('2d')
			c2.fillStyle = '#ff0000'
			c2.save()
			c2.fillStyle = '#00ff00'
			c2.translate(100,100)
			c2.save()
			c2.fillStyle = '#0000ff'
			//从点100,100开始绘制蓝色矩形
			c2.fillRect(0,0,100,200)
			c2.restore()
			c2.fillRect(10,10,100,200)
			c2.restore()
			c2.fillRect(0,0,100,200)