众所周知 Canvas 是HTML5的核心技术技术所在，canvas元素用于在网页上进行绘制图形，但是canvas本身并不具备绘制功能，canvas必须依靠javascript才能绘制出绚丽的图形；HTML5中canvas提供了多种绘制路径、矩形、圆形、字符以及添加图像的方法；

那么canvas具体可以做什么呢？

（1）.游戏：HTML5在web图像显示方面要远比flash强大，canvas在的运用能够使HTML5的游戏运行起来更加的流畅且跨平台能力更强; Flappy Bird游戏我想对大家来说可能在熟悉不过啦；看似简单而难度极大的这款Flappy Bird的HTML5版仅仅需要65行js代码；

（2）.进行字体渲染： 利用的HTML5的canvas可以实现完全基于web端的绚丽的字体的设计与实现;

（3）.banner图：HTML5技术能够在广告领域发挥重要的作用; 用canvas实现动态的广告效果再适合不过（本人现在从事广告方面的制作，在效果方面canvas用的挺多;）

（4）.图表制作：canvas图表制作时常会被人们所忘记；相比于canvas，也许SVG在这方面可能发挥着更好的作用，但是canvas 和 SVG 各有各的优点，canvas提供的功能更原始，适合像素的处理，动态的渲染和大数据量的绘制；SVG的功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景；（5）.图片存储下载：canvas提供了一些用于web网页中截图、下载的方法；

（6）.可嵌入其他网站的内容之中：类似图表、音频、视频、还有许多的元素能够更好地与web融合，且不需要任何的插件；

canvas画雪花

1、封装画线函数

function drawLine(ctx,x1,y1,x2,y2,color){ ctx.save(); ctx.beginPath(); ctx.strokeStyle = color; ctx.lineTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); ctx.restore();}

2、画雪花的六条线

function canvasSingleSnow(snowSize){ var singleSnow = document.createElement('canvas'); var ctxSingle = singleSnow.getContext('2d'); singleSnow.setAttribute('width', snowSize * 2); singleSnow.setAttribute('height', snowSize * 2); ctxSingle.translate(snowSize, snowSize);//定位原点到画布中心 for(var i = 0; i < 6; i++){//画六条线 ctxSingle.save(); ctxSingle.rotate(Math.PI*2 * i/6); drawLine(ctxSingle, 0, 0, snowSize, 0,"#656565"); ctxSingle.restore(); } return singleSnow;}

首先这里用到了离屏canvas，我们通过传参的方式确定离屏canvas的尺寸，是为了尽可能避免canvas图案缩放导致的显示效果问题。

另外这里for循环中用到了canvas的旋转效果，所以我们可以很轻易的画出6条有角度的线。效果如下图所示

3、画出完整的雪花

function drawCanvasSnow(centerSnow){ var canvasSnow = document.createElement('canvas'); var ctxSnow = canvasSnow.getContext('2d'); canvasSnow.setAttribute('width', centerSnow * 2); canvasSnow.setAttribute('height', centerSnow * 2); //画一个大雪花 var bigSnow = canvasSingleSnow(centerSnow); ctxSnow.drawImage(bigSnow, 0, 0, bigSnow.width, bigSnow.height, 0, 0, centerSnow * 2, centerSnow * 2); //画六个小雪花 var smallSnow = canvasSingleSnow(centerSnow/3); var sizeSnow = centerSnow * 3/5;//小雪花的尺寸(直径) var rSnow = centerSnow - sizeSnow/2;//小雪花的位置(离大雪花中心的距离) for(var i = 0; i < 6; i++){ ctxSnow.save(); ctxSnow.translate(centerSnow, centerSnow); ctxSnow.rotate(Math.PI*2 * i/6); ctxSnow.drawImage(smallSnow, 0, 0, smallSnow.width, smallSnow.height, rSnow - sizeSnow/2, -sizeSnow/2, sizeSnow, sizeSnow); ctxSnow.restore(); } return canvasSnow;}

上述代码中尺寸部分说明：小雪花的尺寸比大雪花小，用比例可以方便缩放；小雪花的位置则固定在大雪花六条线的端点处。效果如下图所示

将离屏canvas作为资源画到实际显示的canvas上

1、封装一个根据旋转加载离屏canvas的函数

//r为雪花图案中心距画布中心的距离//angle为雪花图案在画布上的安放角度//size为雪花图案的显示尺寸function drawSnowAngle(ctx,r,angle,size){ ctx.save(); ctx.rotate(Math.PI*2 * angle); drawLine(ctx,0,0,r,0,"#656565"); ctx.drawImage(canvasSnow, 0, 0, canvasSnow.width, canvasSnow.height, r - size/2, -size/2, size, size); ctx.restore();}

2、可以将离屏canvas画的雪花图案画到实际显示的canvas上了

//center为实际显示canvas的画布中心(半径)//rSnow为雪花图案的半径drawSnowAngle(ctx, center - rSnow, i/snowNum, rSnow * 2);

3、加上动态旋转效果

var snowNum = 1;var isAdd = true;var loop = setInterval('drawCanvas()', 10);//定时器，每10ms绘制一次function drawCanvas(){ //设置旋转效果 if(snowNum >= 18){isAdd = false;}//最大个数为18 else if(snowNum <= 1){isAdd = true;}//最小个数为1 if(isAdd){snowNum += snowNum/200;}//达到最大后开始递减 else{snowNum -= snowNum/100;}//达到最少后开始递增 //画图 var rSnow = center/2 * (snowNum - 6)/6;//设置雪花图案显示尺寸 canvasSnow = drawCanvasSnow(rSnow);//画出离屏雪花图案 ctx.clearRect(-center, -center, center * 2, center * 2);//清除画布 for(var i = 0; i < snowNum; i++){//开始画图 drawSnowAngle(ctx, center - rSnow, i/snowNum, rSnow * 2); }}

想学习交流的加web前端交流群642496395，一起交流技术，共享经验。