首页 > 代码库 > Canvas 图形组合方式
Canvas 图形组合方式
/** * 图形组合 */ function initDemo5() { var canvas = document.getElementById("demo5"); if (!canvas) return; var context = canvas.getContext("2d"); var oprtns = [ "source-atop", // 新图形覆盖原有图形,新图形未重叠部分透明 "source-in", // 新图形覆盖原有图形,所有未重叠部分透明 "source-out", // 新图形的未重叠部分显示,原有图形和重叠部分透明 "source-over", // 新图形覆盖原有图形 "destination-atop", // 原有图形覆盖新图形,原有图形未重叠部分透明 "destination-in", // 原有图形覆盖新图形,所有未重叠部分透明 "destination-out", // 原有图形未重叠部分显示,新图形和重叠部分透明 "destination-over", // 原有图形覆盖新图形 "lighter", // 重叠部分颜色叠加 "copy", // 只显示新图形 "xor" // 所有未重叠部分显示,重叠部分透明 ]; var index = 10; // 修改选择图形组合参数 context.fillStyle = "blue"; context.fillRect(10, 10, 165, 165); context.globalCompositeOperation = oprtns[index]; // 设置图形组合方式 context.beginPath(); context.fillStyle = "red"; context.arc(165, 165, 120, 0, Math.PI*2, false); context.fill(); context.closePath(); }
Canvas 图形组合方式
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。