Web大前端時代之：HTML5+CSS3入門系列：http://www.cnblogs.com/dunitian/p/5121725.html
我們先看看畫布的魅力：
初始畫布
canvas默認是寬300px，高150px;
繪制步驟
1.定義一個id
<canvas id="canvasOne" width="300" height="300"></canvas>
2.獲取canvas對象
var canvasObj = document.getElementById('canvasOne');
3.通過getContext獲取上下文
var context = canvasObj.getContext("2d");
目前支持2d繪圖
4.通過javascript進行繪制
context.fillStyle = "red";
設置樣式為紅色
context.fillRect(125, 125, 50, 50);
在x坐標為125，y坐標為125的地方繪制一個長為50寬為50的正方形
繪制案例
常見幾何
繪制直線
繪制300*300畫布的對角線
beginPath()
開始繪制
moveTo(x,y)
直線起點
lineTo(x,y)
直線終點
stroke()
繪制直線
<canvas id="canvasOne" width="300" height="300"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext("2d");
//context.strokeStyle = "#ff6a00";
context.beginPath();
context.moveTo(0, 0);
context.lineTo(300, 300);
context.stroke();
context.moveTo(0, 300);
context.lineTo(300, 0);
context.stroke();
</script>
繪制矩形
在畫布中間繪制一個100*50的矩形
繪制
strokeStyle
strokeRect(x,y,w,h)
填充
fillStyle
fillRect(x,y,w,h)
<canvas id="canvasOne" width="300" height="300"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext("2d");
context.strokeStyle = 'rgb(100%,0%,100%)';
context.strokeRect(100, 125, 100, 50);
</script>
繪制圓形
繪制300*300畫布的內切圓
beginPath()
開始繪制路徑
arc(x, y, r, s, e, b)
x，y 坐標這次是代表圓心
r 代表半徑
s 代表開始弧度
e 代表結束弧度
b 代表是否逆時針方向畫圖
默認順時針
closePath()
結束繪制路徑
擴充案例
fill()
填充
<canvas id="canvasOne" width="300" height="300"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext("2d");
context.fillStyle = 'rgb(0,50,0)';
context.beginPath();//開始繪制路徑
context.arc(150, 150, 150, 0, Math.PI * 2,true);//注意：x，y 坐標這次是代表圓心
context.closePath();//結束繪制路徑
context.fill();//填充
</script>
繪制弧線
context.closePath();
路徑不閉合的時候會自動畫一條直線（代碼看注釋）
<canvas id="canvasOne" width="300" height="300"></canvas>
<canvas id="canvasTwo" width="300" height="300"></canvas>
<canvas id="canvasThree" width="300" height="300"></canvas>
<script type="text/javascript">
//第一個畫布
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext("2d");
for (var i = 0; i <= 15; i++) {
context.strokeStyle= 'rgb(0,50,0)';
context.beginPath();//開始繪制路徑
context.arc(0, 150, i * 10, 0, Math.PI * 1.5);//注意：x，y 坐標這次是代表圓心
//context.closePath();//結束繪制路徑
context.stroke();//填充
}
//第二個畫布
var canvasObj2 = document.getElementById('canvasTwo');
var context2 = canvasObj2.getContext("2d");
for (var i = 0; i <= 30; i++) {
context2.strokeStyle= 'rgb(0,0,50)';
context2.beginPath();//開始繪制路徑
context2.arc(0, 0, i * 10, 0, Math.PI * 1.5);//注意：x，y 坐標這次是代表圓心
//context2.closePath();//結束繪制路徑
context2.stroke();//填充
}
//第三個畫布-搞怪來襲
var canvasObj3 = document.getElementById('canvasThree');
var context3 = canvasObj3.getContext("2d");
for (var i = 0; i <= 30; i++) {
context3.strokeStyle= 'rgb(0,0,50)';
context3.beginPath();//開始繪制路徑
context3.arc(0, 150, i * 10, 1, 3);//注意：x，y 坐標這次是代表圓心
context3.closePath();//結束繪制路徑,路徑不閉合的情況下會自動補上一個直線，所以就搞怪了
context3.stroke();//填充
}
</script>
繪制三角形
繪制三角形
<canvas id="myCanvas" width="200" height="200"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.strokeStyle = "red";
context.beginPath();
context.moveTo(25, 25);
context.lineTo(150, 25);
context.lineTo(25, 150);
context.closePath();
context.stroke();
</script>
常用技能
透 明 度
rgba(r,g,b,a)
a代表透明度，取值范圍在 0~1
清 除 畫 布
context.clearRect(x,y,w,h)
（圓形橡皮擦）
案例
保存與恢復狀態
狀態
指當前畫面所有樣式，變形，裁切的快照
舉個例子：你先用紅色樣式畫一個矩形，然后保存狀態，然后再用藍色樣式畫一個矩形。
恢復狀態畫個矩形看看，發現====> 矩形是紅色的====>說明====>狀態保存下來了。
圖例
保存
context.save();
恢復
context.restore()
移動坐標空間
context.translate(60,50);
x軸方向右移60，y軸方向下移50
for (var i = 1; i < 10; i++) {
context.save();//保存一下狀態
context.translate(60 * i, 50);//x軸方向右移60*i，y軸方向下移50
//畫傘的頂部
context.fillStyle = 'rgb(' + i * 25 + ',' + 0 + ',' + 255 + ')';
context.beginPath();
context.arc(0, 0, 30, 0, Math.PI, true);//在起點位置順時針畫一個半圓
context.closePath();
context.fill();
//畫傘的底部
context.strokeStyle = "red";
context.strokeRect(-0.2, 0, 0.4, 30);
//畫傘的根部
context.beginPath();
context.arc(-5, 30, 5, 0, Math.PI);//圓心左移五個單位，圓的右邊點就在根部了
context.stroke();
context.restore();//恢復一下狀態（不然每次都移動坐標原點，就變成天女散花了）
}
for (var i = 1; i < 10; i++) {
//x軸方向右移60+i，y軸方向下移50
context.translate(60 + i, 50);
//畫傘的頂部
context.fillStyle = 'rgb(' + 255 + ',' + i * 25 + ',' + 0 + ')';
context.beginPath();
context.arc(0, 0, 30, 0, Math.PI, true);//在起點位置順時針畫一個半圓
context.closePath();
context.fill();
//畫傘的底部
context.strokeStyle = "red";
context.strokeRect(-0.2, 0, 0.4, 30);
//畫傘的根部
context.beginPath();
context.arc(-5, 30, 5, 0, Math.PI);//圓心左移五個單位，圓的右邊點就在根部了
context.stroke();
}
旋轉坐標空間
rotate(angle)
angle 代表旋轉角度
弧度為單位
在坐標原點順時針方向旋轉
<canvas id="canvasOne" width="600" height="600"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext('2d');
context.translate(300, 300);
//畫傘
function drawUmbrella(i) {
//畫傘的頂部
context.fillStyle = 'rgb(' + i * 25 + ',' + 0 + ',' + 255 + ')';
context.beginPath();
context.arc(0, 0, 30, 0, Math.PI, true);//在起點位置順時針畫一個半圓
context.closePath();
context.fill();
//畫傘的底部
context.strokeStyle = "red";
context.strokeRect(-0.2, 0, 0.4, 30);
//畫傘的根部
context.beginPath();
context.arc(-5, 30, 5, 0, Math.PI);//圓心左移五個單位，圓的右邊點就在根部了
context.stroke();
}
function draw() {
for (var i = 1; i <= 10; i++) {
context.save();//保存一下狀態
context.rotate(Math.PI * (0.2 * i));//2Pi 弧度是一個圓
context.translate(0, 150);//越小越緊湊
drawUmbrella(i);//畫傘（畫傘代碼未變）
context.restore();//恢復一下狀態
}
}
window.onload = function () {
draw();
}
</script>
縮 放 圖 形
context.scale(1.1, 1.1)
擴大1.1倍
rgba(r,g,b,a)
a代表透明度，取值范圍在 0~1
<canvas id="canvasOne" width="600" height="600"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext('2d');
context.translate(300, 300);
for (var i = 1; i < 50; i++) {
context.rotate(Math.PI / 9);//旋轉
context.scale(1.1, 1.1);//擴大1.1倍
context.translate(0.5, 0.5);//平移
context.fillStyle = 'rgba(' + i * 5 + ',' + 0 + ',' + 200 + ',' + 0.5 + ')';
context.beginPath();
context.arc(0, 0, 1, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}
</script>
矩 陣 變 化
其實像 translate（移動），scale（縮放），rotate（旋轉）都是特殊的矩陣變換
transform(m11,m12,m21,m22,dx,dy)
替換當前的變換矩陣（transform() 允許您縮放、旋轉、移動並傾斜當前的環境）
http://www.w3school.com.cn/tags/canvas_transform.asp
參數圖解
本質公式
參數詳解
水平縮放繪圖
m11
水平傾斜繪圖
m12
垂直傾斜繪圖
m21
垂直縮放繪圖
m22
水平移動繪圖
dx
垂直移動繪圖
dy
setTransform(m11,m12,m21,m22,dx,dy)
重置並創建新的變換矩陣
http://www.w3school.com.cn/tags/canvas_settransform.asp
小案例
<canvas id="canvasOne" width="600" height="600"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext('2d');
context.translate(200, 20);
for (var i = 1; i < 90; i++) {
context.save();
//參數：水平縮放繪圖，水平傾斜繪圖，垂直傾斜繪圖，垂直縮放繪圖，水平移動繪圖，垂直移動繪圖
context.transform(0.95, 0, 0, 0.95, 30, 30);
context.rotate(Math.PI / 12);//旋轉角度
context.beginPath();
context.fillStyle = "rgba(255,0,0,0.5)";
context.arc(0, 0, 50, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}
//參數：水平縮放繪圖，水平傾斜繪圖，垂直傾斜繪圖，垂直縮放繪圖，水平移動繪圖，垂直移動繪圖
context.setTransform(1, 0, 0, 1, 10, 10);
//檢驗一下是否變化過來了
context.fillStyle = "blue";
context.fillRect(0, 0, 50, 50);
context.fill();
</script>
擴 展 樣 式
線形屬性
lineWidth
設置線條粗細默認為1，為正數
<canvas id="canvasOne" width="300" height="300"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext('2d');
for (var i = 1; i < 12; i++) {
context.strokeStyle = 'rgb(255,0,0)';
context.lineWidth = i;
context.beginPath();
context.moveTo(i * 20, 0);
context.lineTo(i * 20, 300);
//context.closePath();
context.stroke();
}
</script>
lineCap
設置端點樣式
butt
平頭
默認
round
圓頭
square
方頭
<canvas id="canvasOne" width="300" height="300"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext('2d');
//定義數組
var lineCap = ['butt', 'round', 'square'];
// 繪制參考線。
context.strokeStyle = 'red';
context.beginPath();
context.moveTo(10,10);
context.lineTo(10,150);
context.moveTo(150,10);
context.lineTo(150,150);
context.stroke();
// 繪制直線段。
context.strokeStyle = 'blue';
for (var i = 0; i < lineCap.length; i++) {
context.lineWidth = 20;
context.lineCap = lineCap[i];
context.beginPath();
context.moveTo(10, 30 + i * 50);
context.lineTo(150, 30 + i * 50);
context.stroke();
}
</script>
lineJoin
設置連接處樣式
round
圓
bevel
斜面
miter
默認
<canvas id="canvasOne" width="500" height="200"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext('2d');
var lineJoin = ['round', 'bevel', 'miter'];
context.strokeStyle = 'rgb(0,0,0)';
for (var i = 0; i < lineJoin.length; i++) {
context.lineWidth = 25;
context.lineJoin = lineJoin[i];
context.beginPath();
context.moveTo(10 + i * 150, 30);
context.lineTo(100 + i * 150, 30);
context.lineTo(100 + i * 150, 100);
context.stroke();
}
</script>
miterLimit
設置或返回最大斜接長度
前提
lineJoin使用默認屬性（miter）
<canvas id="canvasOne" width="1600" height="300"></canvas>
<script type="text/javascript">
var context = document.getElementById('canvasOne').getContext('2d');
for (var i = 1; i < 10; i++) {
context.strokeStyle = 'blue';
context.lineWidth = 10;
context.lineJoin = 'miter';
context.miterLimit = i * 10;
context.beginPath();
context.moveTo(10, i * 30);
context.lineTo(100, i * 30);
context.lineTo(10, 33 * i);
context.stroke();
}
</script>
漸 變 系 列
線形漸變
createLinearGradient(x0, y0, x1, y1)
請使用該對象作為 strokeStyle 或 fillStyle 屬性的值
x0,y0
漸變起點
x1,y1
漸變終點
addColorStop(position, color);
一般都是設置多個色標
position
色相偏移值
取值 0~1
color
顏色
並非一定從0開始，1結束
<canvas id="canvasOne" width="300" height="300"></canvas>
<script type="text/javascript">
var context = document.getElementById('canvasOne').getContext('2d');
var lingrad = context.createLinearGradient(0, 0, 0, 200);
lingrad.addColorStop(0, '#ff0000');
lingrad.addColorStop(1 / 7, '#ff9900');
lingrad.addColorStop(2 / 7, '#ffff00');
lingrad.addColorStop(3 / 7, '#00ff00');
lingrad.addColorStop(4 / 7, '#00ffff');
lingrad.addColorStop(5 / 7, '#0000ff');
lingrad.addColorStop(6 / 7, '#ff00ff');
lingrad.addColorStop(1, '#ff0000');
context.fillStyle = lingrad;
context.fillRect(10, 10, 200, 200);
</script>
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0.1, 'rgb(255,255,255)');
grd.addColorStop(0.5, 'rgb(0,100,0)');
grd.addColorStop(0.9, 'rgb(0,0,0)');
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);
徑向漸變
createRadialGradient(x1,y1,r1,x2,y2,r2)
以（x1,y1）為原點，r1為半徑的圓
以（x2,y2）為原點，r2為半徑的圓
addColorStop(position, color);
一般都是設置多個色標
position
色相偏移值
取值 0~1
color
顏色
並非一定從0開始，1結束
<canvas id="myCanvas" width="300" height="240"></canvas>
<script language="javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');
var radgrad = ctx.createRadialGradient(55, 55, 20, 100, 100, 90);
radgrad.addColorStop(0, 'rgb(255,255,0)');
radgrad.addColorStop(0.75, 'rgb(255,0,0)');
radgrad.addColorStop(1, 'rgb(255,255,255)');
ctx.fillStyle = radgrad;
ctx.fillRect(10, 10, 200, 200);
</script>
創 建 陰 影
參數
shadowOffsetX
shadowOffsetX 屬性設置或返回形狀與陰影的水平距離
shadowOffsetX=0 指示陰影位於形狀的正下方。
shadowOffsetX=20 指示陰影位於形狀 left 位置右側的 20 像素處。
shadowOffsetX=-20 指示陰影位於形狀 left 位置左側的 20 像素處。
shadowOffsetY
shadowOffsetY 屬性設置或返回形狀與陰影的垂直距離。
shadowOffsetY=0 指示陰影位於形狀的正下方。
shadowOffsetY=20 指示陰影位於形狀 top 位置下方的 20 像素處。
shadowOffsetY=-20 指示陰影位於形狀 top 位置上方的 20 像素處。
shadowBlur
shadowBlur 屬性設置或返回陰影的模糊級數。
shadowColor
shadowColor 屬性設置或返回用於陰影的顏色
<canvas id="canvasOne" width="600" height="600"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext('2d');
//設置前畫個圖
context.fillStyle = '#0094ff';
context.fillRect(410, 310, 50, 50);
//設置陰影
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 1;
context.shadowColor = '#808080';
//畫矩形
context.fillRect(200, 200, 200, 100);
//繪圖
var img = new Image();
img.src = '/images/1.jpg';
img.onload = function () {
context.fillStyle = context.createPattern(img, 'no-repeat');
context.fillRect(0, 0, 600, 600);
}
</script>
繪制文字
繪制填充文字
fillText（str,x,y,[mw]）
str
文字內容
x,y
起點坐標
mw
最大寬度
可選參數
繪制文字輪廓
strokeText（str,x,y,[mw]）
str
文字內容
x,y
起點坐標
mw
最大寬度
可選參數
測量文字寬度
measureText(str)
context.measureText(str).width
文字寬度
str
文字內容
文字系列屬性
context.font
語法
context.font="italic small-caps bold 12px arial";
font-style
規定字體樣式。可能的值：
normal
italic
斜體字
oblique
傾斜
font-variant
規定字體變體。可能的值：
normal
small-caps
大寫
font-weight
規定字體的粗細。可能的值：
normal
bold
bolder
lighter
100
font-family
規定字體系列。
font-size / line-height
規定字號和行高，以像素計。
icon
使用用於標記圖標的字體。
menu
使用用於菜單中的字體（下拉列表和菜單列表）。
caption
使用標題控件的字體（比如按鈕、下拉列表等）。
status-bar
使用用於窗口狀態欄中的字體。
message-box
使用用於對話框中的字體。
small-caption
使用用於標記小型控件的字體。
案例
<canvas id="canvasOne" width="500" height="300"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext('2d');
var str = 'http://dnt.dkill.net';
context.fillStyle = 'rgba(255,0,0,0.9)';
context.strokeStyle = 'rgba(255,0,0,0.9)';
context.font = '30px 微軟雅黑';
context.strokeText(str, 100, 40);
console.log(context.measureText(str).width);
context.fillText(str, 100, 80);
console.log(context.measureText(str).width);
context.font = 'bold 30px 微軟雅黑';
context.strokeText(str, 100, 150);
console.log(context.measureText(str).width);
context.fillText(str, 100, 180);
console.log(context.measureText(str).width);
</script>
圖像系列
1.圖像來源
路徑圖片
直接對 src 賦值
var img=new Image();
img.src='xxx';
頁面圖片
來源於頁面，如果已知id則可通過
document.images 集合
document.getElementsByTagName
document.getElementsById
其他canvas元素
document.getElementsByTagName
document.getElementsById
2.drawImage繪圖
context.drawImage(img,x,y)
在畫布上定位圖像
img 規定要使用的圖像、畫布或視頻。
x 在畫布上放置圖像的 x 坐標位置。
y 在畫布上放置圖像的 y 坐標位置。
//獲取路徑圖片
document.getElementById('btn1').onclick = function () {
clearCanvas(context);
var img1 = new Image();
img1.src = '/images/1.jpg';
context.drawImage(img1, 150, 150);
}
context.drawImage(img,x,y,w,h)
在畫布上定位圖像，並規定圖像的寬度和高度
img 規定要使用的圖像、畫布或視頻。
x 在畫布上放置圖像的 x 坐標位置。
y 在畫布上放置圖像的 y 坐標位置。
w 要使用的圖像的寬度。（伸展或縮小圖像）
h 要使用的圖像的高度。（伸展或縮小圖像）
//獲取頁面圖片
document.getElementById('btn2').onclick = function () {
clearCanvas(context);
var img2 = document.getElementById('imgOne');
context.drawImage(img2, 150, 150, 200, 200);
}
context.drawImage(img,sx,sy,sw,sh,x,y,w,h)
剪切圖像，並在畫布上定位被剪切的部分
img 規定要使用的圖像、畫布或視頻。
sx 開始剪切的 x 坐標位置。
sy 開始剪切的 y 坐標位置。
sw 被剪切圖像的寬度。
sh 被剪切圖像的高度。
x 在畫布上放置圖像的 x 坐標位置。
y 在畫布上放置圖像的 y 坐標位置。
w 要使用的圖像的寬度。（伸展或縮小圖像）
h 要使用的圖像的高度。（伸展或縮小圖像）
//從Canvas獲取
document.getElementById('btn3').onclick = function () {
clearCanvas(context);
var img3 = document.getElementById('canvasTwo');
context.drawImage(img3, 150, 150, 300, 250, 50, 50, 400, 300);
}
擴展（不完美）
createPattern（image，type）
image
規定要使用的圖片、畫布或視頻元素
var img=new Image();
type
是否重發
repeat|repeat-x|repeat-y|no-repeat
<canvas id="canvasOne" width="600" height="600"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext('2d');
var img = new Image();
img.src = '/images/1.jpg';
img.onload = function () {
context.fillStyle = context.createPattern(img, 'repeat');
context.fillRect(0, 0, 600, 600);
}
</script>
注意：
context.fillRect(100, 0, 600, 600);
這里的fillRect（x,y,w,h）。x,y既指的是坐標原點，也指的是圖片原點
擴展部分
繪制貝塞爾曲線
二次方貝塞爾曲線
quadraticCurveTo(cp1x,cp1y,x,y)
cp1x,cp1y是控制點坐標
x,y是終點坐標
<canvas id="myCanvas" style="border:1px solid;" width="300" height="200"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
// 下面開始繪制二次方貝塞爾曲線。
context.strokeStyle="dark";
context.beginPath();
context.moveTo(0,200);
context.quadraticCurveTo(75,50,300,200);
context.stroke();
context.globalCompositeOperation="source-over";
// 下面繪制的直線用於表示上面曲線的控制點和控制線，控制點坐標即兩直線的交點（75,50）。
context.strokeStyle="#ff00ff";
context.beginPath();
context.moveTo(75,50);
context.lineTo(0,200);
context.moveTo(75,50);
context.lineTo(300,200);
context.stroke();
</script>
三次方貝塞爾曲線
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
cp1x,cp1y是控制點坐標
cp2x,cp2y是第二個控制點坐標
x,y是終點坐標
<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
// 下面開始繪制三次方貝塞爾曲線。
context.strokeStyle="dark";
context.beginPath();
context.moveTo(0,200);
context.bezierCurveTo(25,50,75,50,300,200);
context.stroke();
context.globalCompositeOperation="source-over";
// 下面繪制的直線用於表示上面曲線的控制點和控制線，控制點坐標為（25,50）和（75,50）。
context.strokeStyle="#ff00ff";
context.beginPath();
context.moveTo(25,50);
context.lineTo(0,200);
context.moveTo(75,50);
context.lineTo(300,200);
context.stroke();
</script>
組合裁切
組合
globalCompositeOperation
設置或返回如何將一個源（新的）圖像繪制到目標（已有）的圖像上
裁切
clip()
從原始畫布中剪切任意形狀和尺寸
案例
從畫布中剪切 200*120 像素的矩形區域。然后，繪制綠色矩形。只有被剪切區域內的綠色矩形部分是可見的
<p>不使用 clip()：</p>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 150, 100);
</script>
<br />
<p>使用 clip()：</p>
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
// Clip a rectangular area
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 150, 100);
</script>
案例2
<canvas id="myCanvas" style="border:1px solid;" width="300" height="300"></canvas>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('myCanvas').getContext("2d");
// 繪制背景。
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 300, 300);
ctx.fill();
// 繪制圓形。
ctx.beginPath();
ctx.arc(150, 150, 130, 0, Math.PI * 2, true);
// 裁切路徑。
ctx.clip();
ctx.translate(200, 20);
for (var i = 1; i < 90; i++) {
ctx.save();
ctx.transform(0.95, 0, 0, 0.95, 30, 30);
ctx.rotate(Math.PI / 12);
ctx.beginPath();
ctx.fillStyle = "red";
ctx.globalAlpha = "0.4";
ctx.arc(0, 0, 50, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
}
window.onload = function () {
draw();
}
</script>
