h5 canvas学习之旅，待补充

//fillStyle属性设置或返回用于填充绘画的颜色、渐变或模式。

/*一个用蓝色填充的矩形

ctx.fillStyle = '#00f';

//一个从黑到白(中间是红)的渐变（从左到右）

var grd = ctx.createLinearGradient(0,0,150,0);

grd.addColorStop(0,"black");

grd.addColorStop(0.5,"red");

grd.addColorStop(1,"white");

ctx.fillStyle = grd;

//fillStyle模式 图片重复填充，谷歌（2016）竟然不支持，火狐支持，IE11支持

var c = document.getElementById('my_canvas');

var ctx = c.getContext('2d');

var img=document.getElementById("a");

var pat=ctx.createPattern(img,"repeat");

ctx.rect(0,0,150,100);

ctx.fillStyle=pat;

ctx.fill();

//一个矩形的阴影，可以控制位置和模糊度以及颜色

var c = document.getElementById('my_canvas');

var ctx = c.getContext('2d');

ctx.shadowBlur = 20;

ctx.shadowOffsetX = 10;

ctx.shadowOffsetY = 10;

ctx.shadowColor = 'black';

ctx.fillStyle = 'rgba(0,0,255,0.2)';

ctx.fillRect(20,20,100,150);

//绘制两条路径

ctx.beginPath();

ctx.lineWidth = '10';

ctx.strokeStyle = 'blue';

ctx.moveTo(0,75);

ctx.lineTo(100,20);

ctx.lineTo(250,75);

ctx.stroke();

ctx.beginPath();

ctx.lineWidth = '5';

ctx.strokeStyle = 'red';

ctx.moveTo(0,55);

ctx.lineTo(250,55);

ctx.stroke();

// ctx.beginPath();

ctx.fillStyle = 'red';

ctx.fillRect(0,100,50,50);

//裁剪掉一部分，其余部分不予显示

ctx.rect(50,20,200,120);

ctx.stroke();

ctx.clip();

ctx.fillStyle = 'red';

ctx.fillRect(0,0,200,120);

ctx.moveTo(20,20);

ctx.quadraticCurveTo(20,150,200,20);

//一个蓝色的1/4小球

var c = document.getElementById('my_canvas');

var ctx = c.getContext('2d');

ctx.fillStyle = 'blue';

ctx.beginPath();

ctx.arc(300,200,20,0,1.5*Math.PI,true);

ctx.lineTo(300,200);

ctx.closePath();

ctx.fill();

ctx.beginPath();

ctx.moveTo(20,20);

ctx.lineTo(100,20);

ctx.arcTo(150,20,150,180,50);

ctx.lineTo(150,120);

ctx.stroke();

ctx.beginPath();

ctx.strokeStyle = 'blue';

ctx.moveTo(20,20);

ctx.lineTo(150,20);

ctx.lineTo(150,120);

ctx.stroke();

*/