//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();
*/
