H5学习笔记（三）--canvas绘制矩形、路径、曲线和变换

1、绘制矩形

笔记

HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他			
的图形的绘制都至少需要生成一条路径

1.绘制矩形
	canvas提供了三种方法绘制矩形：
		---->绘制一个填充的矩形（填充色默认为黑色）
			fillRect(x, y, width, height)
		---->绘制一个矩形的边框（默认边框为:一像素实心黑色）
			strokeRect(x, y, width, height)
		---->清除指定矩形区域，让清除部分完全透明。	
			clearRect(x, y, width, height)
			
	x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。
	width和height设置矩形的尺寸。（存在边框的话，边框会在width上占据一个边框的宽度，height同理）

2.strokeRect时，边框像素渲染问题
	按理渲染出的边框应该是1px的，
	canvas在渲染矩形边框时，边框宽度是平均分在偏移位置的两侧。
		context.strokeRect(10,10,50,50)
			:边框会渲染在10.5 和 9.5之间,浏览器是不会让一个像素只用自己的一半的
			  相当于边框会渲染在9到11之间
		context.strokeRect(10.5,10.5,50,50)
			:边框会渲染在10到11之间

3.添加样式和颜色
	fillStyle   :设置图形的填充颜色。
	strokeStyle :设置图形轮廓的颜色。
		默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）
	lineWidth : 这个属性设置当前绘线的粗细。属性值必须为正数。
		描述线段宽度的数字。 0、 负数、 Infinity 和 NaN 会被忽略。
		默认值是1.0。
		
4.lineWidth & 覆盖渲染

5.lineJoin
	设定线条与线条间接合处的样式（默认是 miter）
	round : 圆角
	bevel : 斜角
	miter : 直角

实例

    //拿到画布
    var canvas = document.querySelector("#test")
    if (canvas.getContext) {
   
      var ctx = canvas.getContext("2d")

      //先写样式
      ctx.fillStyle="deeppink"
      ctx.strokeStyle="pink"
      ctx.lineWidth=50
      ctx.lineJoin="bevel"
      // ctx.lineJoin="round"
      // ctx.lineJoin="miter"

      //注意不加单位
      //填充的矩形
      ctx.fillRect(0, 0, 100, 100)
      //带边框的矩形 
      //100  : 99.5 --- 100.5(99-101)
      //100.5: 100  --- 101
      ctx.strokeRect(100, 100, 100, 100)
      ctx.clearRect(100, 100, 100, 100)
    }

2、绘制路径

笔记

canvas绘制路径
	图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

步骤
1.首先，你需要创建路径起始点。
2.然后你使用画图命令去画出路径
3.之后你把路径封闭。
4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

绘制三角形
beginPath()
	新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。
	生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，
	所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，
	然后我们就可以重新绘制新的图形。

moveTo(x, y)
	将笔触移动到指定的坐标x以及y上
	当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点
	
lineTo(x, y)
	将笔触移动到指定的坐标x以及y上
	绘制一条从当前位置到指定x以及y位置的直线。

closePath()
	闭合路径之后图形绘制命令又重新指向到上下文中。
		闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。
	如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做
		当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。
	但是调用stroke()时不会自动闭合
	
stroke()
	通过线条来绘制图形轮廓。
	不会自动调用closePath()
	
fill()
	通过填充路径的内容区域生成实心的图形。
	自动调用closePath()
	
绘制矩形 rect(x, y, width, height)
	绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。
	当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）。
	也就是说，当前笔触自动重置会默认坐标
	
lineCap
lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。
有3个可能的值，分别是&#