这个月最佳分享花落 @jonny ，借此机会也鼓励隽永东方小伙伴们多分享SEO技巧和经验，特发红包鼓励：
今天进行技术分享的是 @leo ，精彩分享内容如下：
//什么是Canvas？
//
//Canvas元素是HTML5的一部分（甚至是H5的核心技术），允许脚本语言动态渲染位图像。Canvas由一个可绘制区域内HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该区域，通过一套完整的绘图功能类似于其他通用二维的API，从而生成动态的图形。
//
//我们能用Canvas做些什么？
//
//1. 游戏：毫无疑问，游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧，Ohad认为运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥更大的潜力。
//
//2. 图表制作：图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作，但Ohad认为大家完全可以用Canvas来实现。当然，使用SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。
//
//3. banner广告：Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。
//
//4. 模拟器：Ohad认为，无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。
//
//5. 远程计算机控制：Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。
//
//6. 字体设计：对于字体的自定义渲染将完全可以基于Web，使用HTML5技术进行实现。
//
//7. 图形编辑器：Ohad预测，图形编辑器将能够100%基于Web实现。
//
//8. 其他可嵌入网站的内容：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。Ohad呼吁大家继续挖掘Canvas的潜力，运用HTML5技术创造更多价值。
//1、获取画布
var canvas = document.getElementById("canvas");
//2、设置画布的大小
canvas.width = 600;
canvas.height = 500;
//3、获取canvas上下文（得到一支画笔）
var ctx = canvas.getContext("2d"); //目前只支持2d
//4、绘制图形
ctx.strokeRect(20,20,50,50); //strokeRect方法四个参数分别为x、y、width、height，描边
ctx.fillRect(90,20,50,50); // 参数同strokeRect，填充颜色
//5、清除绘制
// ctx.clearRect(0,0,canvas.width,canvas.height); //clearRect方法会清除上方所有的绘制
//6、修改画笔的设置
ctx.strokeStyle = "red";
ctx.strokeRect(160,20,50,50);
ctx.fillStyle = "green";
ctx.fillRect(230,20,50,50);
//7、将画笔样式设为渐变色
//7.1、创建线性渐变色
var lineGradient = ctx.createLinearGradient(230,20,230,70); //createLinearGradient(x0,y0,x1,y1);四个参数分别对应x、y、width、height 注意，这只是渐变色
lineGradient.addColorStop(0,"red"); //addColorStop() 方法规定 gradient 对象中的颜色和位置
lineGradient.addColorStop(0.5,"yellow");
lineGradient.addColorStop(1,"green");
ctx.fillStyle = lineGradient;
ctx.fillRect(300,20,50,50); //填充坐标为（300,20）宽度为50px高度为50px的一个正方形，注意这个宽高是可以带方向的，即正负号
//7.2、创建径向渐变
var radialGradient = ctx.createRadialGradient(395,70,5,395,20,25); //createRadialGradient(x0,y0,r0,x1,y1,r1); 六个参数分别对应渐变圆的起始坐标（x0,y0）起始圆半径为r0,渐变圆的结束坐标（x1,y1），结束圆的半径r1
radialGradient.addColorStop(0,"red");
radialGradient.addColorStop(1,"green");
ctx.fillStyle = radialGradient;
ctx.fillRect(370,20,50,50);
//8、使用图片作为填充背景
//8.1、使用image
var image = new Image();
image.src = "bg.png";
image.onload = function(){
var pattern = ctx.createPattern(image,"repeat"); //createPattern() 方法在指定的方向内重复指定的元素,相当于css样式中的背景图片重复
ctx.fillStyle = pattern;
ctx.fillRect(440,20,50,50); //填充坐标为（440,20）宽度为50px,高度为50px，方向为x轴正方向，y轴正方向
}
//8.2、使用canvas
var pcv = document.createElement("canvas"); //创建canvas元素，并获取画布'pcv'
var pctx = pcv.getContext("2d"); //pctx为画布上下文
pcv.width = 10; //画布大小
pcv.height = 10;
pctx.fillRect(0,0,5,5);
pctx.fillRect(5,5,5,5); //fillRect(x,y,width,height);
var pattern = ctx.createPattern(pcv,"repeat"); //重复pcv
ctx.fillStyle = pattern; //填充样式为 pattern
ctx.fillRect(510,20,50,50); //开始绘制
//9、设置影阴
ctx.fillStyle = "rgb(100,134,214)";
ctx.shadowOffsetX = -5; //shadowOffsetX 属性设置或返回形状与阴影的水平距离。
ctx.shadowOffsetY = -5; //shadowOffsetY 属性设置或返回形状与阴影的垂直距离。
ctx.shadowColor = "black"; //shadowColor阴影颜色为黑色
ctx.shadowBlur = 5; //模糊程度
ctx.fillRect(20,90,50,50); //描边
ctx.strokeRect(90,90,50,50); //填充