2017年9月25日 | | 标签:

这个月最佳分享花落 @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);           //填充