千呼万唤 HTML 5 (11) - 画布（canvas）之效果（下）

Send_linux

6、全局 Alpha | globalAlpha
canvas/effect/globalAlpha.html



全局 Alpha



您的浏览器不支持 canvas 标签


Demo
清除画布
  

  
var ctx = document.getElementById('canvas').getContext('2d');
  
function drawIt() {
  
clearIt();
  
/*
* context.globalAlpha - 设置全局的 alpha 值
*/
ctx.globalAlpha = "0.5";
  
ctx.fillStyle = "red";
ctx.beginPath();
ctx.rect(20, 20, 100, 100);
ctx.fill();
}
  
function clearIt() {
ctx.clearRect(0, 0, 140, 140);
}
  


7、新颜色与画布当前已有颜色的合成方式 | globalCompositeOperation
canvas/effect/globalCompositeOperation.html



新颜色与画布当前已有颜色的合成方式



  

您的浏览器不支持 canvas 标签


改变 globalCompositeOperation
清除画布
  

  
var ctx = document.getElementById('canvas').getContext('2d');
  
var compositeOperationTypes = ['source-atop', 'source-in', 'source-out', 'source-over', 'destination-atop', 'destination-in', 'destination-out', 'destination-over', 'lighter', 'copy', 'xor'];
var index = 0;
  
function drawIt() {
  
clearIt();
  
ctx.fillStyle = "red";
ctx.beginPath();
ctx.rect(20, 20, 100, 100);
ctx.fill();
  
/*
* context.globalCompositeOperation - 设置新颜色与画布当前已有颜色的合成方式
*   source-atop - 保留已有颜色，然后绘制新颜色与已有颜色重合的部分
*   source-in - 绘制新颜色与已有颜色重合的部分，其余全透明
*   source-out - 绘制新颜色与已有颜色不重合的部分，其余全透明
*   source-over - 在已有颜色的前面绘制新颜色。默认值
*   destination-atop - 在已有颜色的后面绘制新颜色，然后保留已有颜色与新颜色重合的部分
*   destination-in - 保留已有颜色与新颜色重合的部分，其余全透明
*   destination-out - 保留已有颜色与新颜色不重合的部分，其余全透明
*   destination-over - 在已有颜色的后面绘制新颜色
*   lighter - 混合重叠部分的颜色
*   copy - 删除已有颜色，只绘制新颜色
*   xor - 透明化重叠部分的颜色
*/
ctx.globalCompositeOperation = compositeOperationTypes[index];
document.getElementById("msg").innerHTML = ctx.globalCompositeOperation;
  
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.rect(80, 80, 100, 100);
ctx.fill();
  
index++;
if (index >= compositeOperationTypes.length)
index = 0;
}
  
function clearIt() {
ctx.clearRect(0, 0, 200, 200);
  
// source-over 是 context.globalCompositeOperation 的默认值
ctx.globalCompositeOperation = "source-over";
}
  


8、保存画布上下文，以及恢复画布上下文 | save(), restore()
canvas/effect/save_restore.html



保存画布上下文，以及恢复画布上下文


单击“save and draw”一次，然后单击“restore and draw”三次
  

您的浏览器不支持 canvas 标签


save and draw
restore and draw
  

  
var ctx = document.getElementById('canvas').getContext('2d');
  
/*
* save() - 将画布的上下文压入堆栈
* restore() - 从堆栈中取一个画布的上下文，如果没有则什么都不做
*/
  
function drawIt() {
clearIt();
  
ctx.strokeStyle = "red";
ctx.fillStyle = "green";
ctx.lineWidth = 5;
ctx.save(); // 将画布的上下文压入堆栈，此时堆栈中有一个画布上下文
  
drawRect1();
  
ctx.strokeStyle = "blue";
ctx.fillStyle = "yellow";
ctx.lineWidth = 10;
ctx.save(); // 将画布的上下文压入堆栈，此时堆栈中有两个画布上下文
  
drawRect2();
}
  
function restoreIt() {
clearIt();
  
ctx.restore(); // 按后进先出的顺序从堆栈里取画布上下文，如果取不到则什么都不做
  
drawRect1();
drawRect2();
}
  
function drawRect1() {
ctx.beginPath();
ctx.rect(20, 20, 100, 100);
ctx.stroke();
ctx.fill();
}
  
function drawRect2() {
ctx.beginPath();
ctx.rect(140, 20, 100, 100);
ctx.stroke();
ctx.fill();
}
  
function clearIt() {
ctx.clearRect(0, 0, 280, 140);
  
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.lineWidth = 1;
}


9、像素操作 | createImageData(), getImageData(), putImageData(), ImageData, CanvasPixelArray
canvas/effect/imageData.html

本文来自ChinaUnix文档频道，如果查看原文请点：http://doc.chinaunix.net/web/201208/2325447.shtml