canvas入门-1三种填充方式、渐变、模式

1、定义canvas的尺寸的时候最好用html的方式定义，用width和height的方式，用css会导致画布按照css设定的方式进行缩放，cavas内部是一个2d的渲染环境

2、一个canvas对应一个2d的渲染环境，绘制图形的操作都是在2d渲染环境中进行的

<canvas id="canvas-1"  style="border:solid 1px gray;" width = "400" height="400"></canvas>

　　一个简单的例子

        <script type="text/javascript">
		var oCanvas = document.getElementById('canvas-1');
		var context = oCanvas.getContext('2d');//指向2d渲染环境的引用
		context.fillStyle = "#FF0000";
		context.fillRect(20,20,100,200)
	</script>
在400*400 的画布上绘制一个距离左边上边20px的一个100*200的矩形用#ff0000颜色填充

　　canvas的2d环境有很多api可以调用

3、fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式，上面我们直接用个的颜色，渐变指的是一个颜色渐变对象

a.首先是context创建一个线性的渐变createLinearGradient()  b.然后设置渐变的范围 createLinearGradient() 3.设定颜色渐变的阶段值(addColorStop())

                var grd=context.createLinearGradient(0,0,170,0);//这是一个从左到右的渐变
		grd.addColorStop(0,"black");
		grd.addColorStop(0.5,"red");
		grd.addColorStop(1,"white");//从黑-->红-->白
		context.fillStyle = grd;
		context.fillRect(0,0,150,100)

　　

var my_gradient=ctx.createLinearGradient(0,0,0,170);//从上到下
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");

　　

                context.fillRect(0,0,200,200);
		var grd=context.createLinearGradient(0,0,200,200);对角线渐变
		grd.addColorStop(0,"black");
		grd.addColorStop(0.5,"red");
		grd.addColorStop(1,"white");
		context.fillStyle = grd;
		context.fillRect(0,0,200,200);

4、填充模式

用模式去填充图片createPattern(img,direction)；

接收2个参数，img对象，和方向的参数repeat repeat-x repeat-y

很奇怪的是我们首次运行的时候并不能绘制出来，而是通过绑定事件的方式就可以绘制出来，

必须在最后加上context.fill()这个函数，否则无法绘制。

<img src="tet.jpg" id="img" onclick="test()">

　　

　　　function test () {
			var direction = 'repeat' || 'repeat-x' || 'repeat-y';
			var img = document.getElementById('img');
			var pat = context.createPattern(img,direction);
			context.rect(0,0,400,400);
			context.fillStyle=pat;
			context.fill();
		}