摘要：另外這里循環(huán)中用到了的旋轉(zhuǎn)效果，所以我們可以很輕易的畫出條有角度的線。效果見文章開頭的效果展示鏈接

效果展示
理論基礎(chǔ)——“常見的canvas優(yōu)化——模糊問題、旋轉(zhuǎn)效果”

1、封裝畫線函數(shù)

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);//定位原點(diǎn)到畫布中心
  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圖案縮放導(dǎo)致的顯示效果問題。

另外這里for循環(huán)中用到了canvas的旋轉(zhuǎn)效果，所以我們可以很輕易的畫出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);
  //畫一個(gè)大雪花
  var bigSnow = canvasSingleSnow(centerSnow);
  ctxSnow.drawImage(bigSnow, 0, 0, bigSnow.width, bigSnow.height,
    0, 0, centerSnow * 2, centerSnow * 2);
  //畫六個(gè)小雪花
  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;
}

上述代碼中尺寸部分說明：小雪花的尺寸比大雪花小，用比例可以方便縮放；小雪花的位置則固定在大雪花六條線的端點(diǎn)處。效果如下圖所示

1、封裝一個(gè)根據(jù)旋轉(zhuǎn)加載離屏canvas的函數(shù)

//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畫的雪花圖案畫到實(shí)際顯示的canvas上了

//center為實(shí)際顯示canvas的畫布中心(半徑)
//rSnow為雪花圖案的半徑
drawSnowAngle(ctx, center - rSnow, i/snowNum, rSnow * 2);

3、加上動(dòng)態(tài)旋轉(zhuǎn)效果

var snowNum = 1;
var isAdd = true;
var loop = setInterval("drawCanvas()", 10);//定時(shí)器，每10ms繪制一次
function drawCanvas(){
  //設(shè)置旋轉(zhuǎn)效果
  if(snowNum >= 18){isAdd = false;}//最大個(gè)數(shù)為18
  else if(snowNum <= 1){isAdd = true;}//最小個(gè)數(shù)為1
  if(isAdd){snowNum += snowNum/200;}//達(dá)到最大后開始遞減
  else{snowNum -= snowNum/100;}//達(dá)到最少后開始遞增
  //畫圖
  var rSnow = center/2 * (snowNum - 6)/6;//設(shè)置雪花圖案顯示尺寸
  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);
  }
}

旋轉(zhuǎn)的雪花就這樣完成了。效果見文章開頭的效果展示鏈接