变换矩阵：所有的变换其实都可以用矩阵来表述。
可以用下面两种方法直接设置变换矩阵：
context.transform(m11, m12, m21, m22, dx, dy)
context.setTransform(m11, m12, m21, m22, dx, dy)
第一个方法直接将当前的变形矩阵乘上下面的矩阵(注意排列的顺序)：
m11  m21  dx
m12  m22  dy
0       0       1
第二个方法会重置当前的变形矩阵为单位矩阵，然后以相同的参数调用transform方法。
function draw() { 
  var canvas = document.getElementById("lesson01"); 
  var ctx = canvas.getContext("2d"); 
 
  var sin = Math.sin(Math.PI/6); 
  var cos = Math.cos(Math.PI/6); 
  ctx.translate(200, 200); 
  var c = 0; 
  for (var i=0; i <= 12; i++) { 
    c = Math.floor(255 / 12 * i); 
    ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")"; 
    ctx.fillRect(0, 0, 100, 10); 
    ctx.transform(cos, sin, -sin, cos, 0, 0); 
  } 
   
  ctx.setTransform(-1, 0, 0, 1, 200, 200); 
  ctx.fillStyle = "rgba(255, 128, 255, 0.5)"; 
  ctx.fillRect(0, 50, 100, 100); 
}

　　所有的变换起始都是通过变换矩阵实现的，所以上述的平移，旋转，缩放都可以用相应的矩阵代替，精通数学的同学可以自己推导出来：
平移：context.translate(dx,dy)可以使用context.transform (1,0,0,1,dx,dy)或者context.transform(0,1,1,0.dx,dy)代替。
旋转：context.rotate(θ)可以使用context.transform(Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180),-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)，0，0)或者
context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)，Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180), 0，0)代替。
缩放：context.scale(sx, sy)可以使用context.transform(sx,0,0,sy,0,0)或者context.transform(0,sy,sx,0, 0,0)代替。
组合
　　默认情况下，我们总是将一个图形画在另一个之上，也就是说绘制的结果受制于绘制图形的顺序。大多数情况下，这样是不够的，设置组合属性就是解决图形重叠时采取何种效果的问题。我们使用globalCompositeOperation属性来改变默认做法。
globalCompositeOperation = type
　　type是下列的12中字符串值之一：
• source-over (default):这是默认设置，新图形会覆盖在原有内容之上。
• source-in:新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。
• ource-out:结果是只有新图形中与原有内容不重叠的部分会被绘制出来。
• source-atop:新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上。
• lighter:两图形中重叠部分作加色处理。
• xor:重叠的部分会变成透明。
• destination-over:会在原有内容之下绘制新图形。
• destination-in:原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的。
• destination-out:原有内容中与新图形不重叠的部分会被保留。
• destination-atop:原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形。
• darker:两图形中重叠的部分作减色处理。
• copy:只有新图形会被保留，其它都被清除掉。
　　假设我们先绘制了一个蓝色的矩形，再绘制一个红色的圆形，则应用这12种组合设置的结果如下所示：

注意：如果设置的属性值没有效果，说明目前您使用的浏览器还不支持该组合属性值。
裁剪
　　与组合相关的一个问题是裁剪。其实在绘制路径的时候，最后一步将图形绘制到canvas的函数除了stroke和fill外，还有就是clip；以clip结束路径时会将当前绘制的图形当做裁剪路径，只有在裁剪路径内的图形才会显示。裁切路径属于canvas状态的一部分，可以被保存起来。如果我们在创建新裁切路径时想保留原来的裁切路径，我们需要做的就是保存一下canvas的状态。
　　例如下面的例子就是先绘制Mask层的背景和裁剪路径，然后绘制的图形就只有在裁剪路径内的才可见：
function draw() { 
  var ctx = document.getElementById('lesson01').getContext('2d'); 
  // draw mask background
  ctx.fillRect(0,0,150,150); 
  ctx.translate(75,75); 

  // create a circular clipping path 
  ctx.beginPath(); 
  ctx.arc(0,0,60,0,Math.PI*2,true); 
  ctx.clip(); 
 
  // draw background 
  var lingrad = ctx.createLinearGradient(0,-75,0,75); 
  lingrad.addColorStop(0, '#232256'); 
  lingrad.addColorStop(1, '#143778'); 
   
  ctx.fillStyle = lingrad; 
  ctx.fillRect(-75,-75,150,150); 
 
  // draw stars 
  for (var j=1;j<50;j++){ 
    ctx.save(); 
    ctx.fillStyle = '#fff'; 
    ctx.translate(75-Math.floor(Math.random()*150), 
                  75-Math.floor(Math.random()*150)); 
    drawStar(ctx,Math.floor(Math.random()*4)+2); 
    ctx.restore(); 
  }   
} 
function drawStar(ctx,r){ 
  ctx.save(); 
  ctx.beginPath() 
  ctx.moveTo(r,0); 
  for (var i=0;i<9;i++){ 
    ctx.rotate(Math.PI/5); 
    if(i%2 == 0) { 
      ctx.lineTo((r/0.525731)*0.200811,0); 
    } else { 
      ctx.lineTo(r,0); 
    } 
  } 
  ctx.closePath(); 
  ctx.fill(); 
  ctx.restore(); 
}

欢迎转载：/bangong/2016/06-27/6329511.html

分享：

推荐： 突袭HTML5之SVG 2D入门2-图形绘制
　　　 突袭HTML5之SVG 2D入门1-SVG综述

标签: web前端 HTML5

猜你喜欢