HTML5 Canvas组合图形

HTML5&CSS3 Alan 8年前 (2016-10-10) 5392次浏览 0个评论 扫描二维码

在学习Canvas组合图形时看描述有些云里雾里,于是记录下实际效果来方便查看:

HTML5 Canvas组合图形

#canvas示例代码

<canvas id="canvas" width="400" height="300"></canvas>

#js示例代码

function draw(id){
  var canvas = document.getElementById(id);
  if(canvas == null)
    return false;
  var context = canvas.getContext('2d');
  var oprtns = new Array(
    "source-atop",
    "source-in",
    "source-out",
    "source-over",
    "destination-atop",
    "destination-in",
    "destination-out",
    "destination-over",
    "lighter",
    "copy",
    "xor"
  );
  i = 8;
  context.fillStyle = "blue";
  context.fillRect(10,10,60,60);
  context.globalCompositeOperation = oprtns[0];#替换此处数字来查看效果
  context.beginPath();
  context.fillStyle = "red";
  context.arc(60,60,30,0,Math.PI*2,false);
  context.fill();
}
喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址