HTML5 Canvas drawing (二)_H5之家 - 中国HTML5教程资源分享第一站

本篇主要讲html5 canvas中剪切区域（clip region）、分层、合成(compositing)、变换(Transformation)（旋转、缩放）功能如何应用。

先贴一个以下所有涉及到的实现运行的基本代码段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="modernizr-latest.js"></script>       <script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function() {};
Debugger.log = function(message) {
try {
console.log(message);
}
catch (exception) { return; }
}

function eventWindowLoaded() { canvasApp(); }

function canvasSupport() {
return Modernizr.canvas;
}

function canvasApp() {
//是否支持CANVAS判断
if(!canvasSupport()) {
return;
}
//取Canvas
var theCanvas = document.getElementById("canvasOne");
//获取绘图环境
contextvar context = theCanvas.getContext("2d");
//绘图方法的实现
function drawScreen() {}
//绘图方法调用执行
drawScreen();
}

</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px; border:1px solid #0000ff">
<canvas id="canvasOne" width="550" height="400">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>

以下所有实例代码，只要把上面的function drawScreen()替换掉即可！
clip region 裁剪区域

在clip region中，我们利用.save 与 .restore来把当前绘图状态压入堆栈与从堆栈中恢复；

使用.save保证裁切前的绘图状态；

通过context.rect()来确定要裁切的区域在位置；

通过context.clip()来执行裁切动作；

在Canvas上画图，只有在裁切区域的图形才能显示出来；

使用context.restore()再恢复到裁切前的状态；

function drawScreen() {
context.fillStyle = "black";
context.fillRect(0, 0, 200, 200);
context.save();
//clip the canvas to a 50×50 square starting at 0,0
context.rect(0, 0, 100, 100);
context.clip();
//red circle
context.beginPath();
context.strokeStyle = "red";
context.lineWidth = 5;
context.arc(100, 100, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);
//full circle
context.stroke();
context.closePath();
context.restore();

//reclip to the entire canvas
context.rect(0, 0, 300, 300);
context.clip();
//draw a blue line that is not clipped
context.beginPath();
context.strokeStyle = "blue"; //need list of available colors
context.lineWidth = 5;
context.arc(100, 100, 50, (Math.PI/180)*0, (Math.PI/180)*360, false);
//full circle
context.stroke();
context.closePath();
}

实例效果图：

Compositing 合成

在Canvas上图形合成，指更好的处理图形的透明度及在画布上的层效果；

compositing操作中有两个比较重要的属性我们先来认识一下： globalAlpha and globalCompositeOperation

globalAlpha:指Canvas的透明度，默认值为1.0，范围是[0.0-1.0];

globalCompositeOperation:应用了“alpha” 及"transformations"的多个图形，是如何绘制的Canvas上的。

共有11种类型： copy\ destination-atop\destination-in\destination-out\destination-over\ lighter\ source-atop\source-in\source-out\source-over\xor

这11种类型中有两个特殊的词"source" and "destination"：

"source":将要在Canvas上绘制的图形(新图形)；