HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像揖膜。
Canvas 繪制圖像
在使用 canvas 繪制圖像時胎围，canvas 畫布左上角的坐標為(0, 0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象聪轿，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 繪制圖像
......
</script>
</body>
</html>
改變 canvas 畫布大小
注意：canvas 畫布大小不可通過 css 來改變捌斧，只能通過屬性方式設置，否則可能出現(xiàn)失幀的情況（當使用 css 方式改變 canvas 畫布大小時西土，只是 cavas 標簽的大小改變了讶舰，正真的繪圖區(qū)域大小并沒有改變，所以出現(xiàn)了失幀的情況）翠储。
<canvas width="600" height="400"></canvas>
繪制直線
- 將畫筆的落點處移至坐標(x,y)處
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.moveTo(x, y);
...
- 創(chuàng)建一條從上一個指定坐標點到坐標(x,y)的線段
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.lineTo(x, y);
...
- 開始繪制
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.stroke();
...
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象绘雁，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 將畫筆的落點處定在坐標(100, 100)處
context.moveTo(100, 100);
// 創(chuàng)建一條畫筆落點處到坐標(200, 200)的線段
context.lineTo(200, 200);
// 開始繪制
context.stroke();
</script>
</body>
</html>
繪制虛線
- 設置實線部分與空白部分的長度
注意：setLineDash()方法的參數(shù)為一個數(shù)組。
1）參數(shù)是一個空數(shù)組援所，則表示繪制實線庐舟。
2）參數(shù)為[a, b]，則元素 a 表示實線部分長度住拭，元素 b 表示虛線部分長度
3）參數(shù)為[a, b, c]挪略，則元素 a 表示實線部分長度，元素 b 表示虛線部分長度滔岳，元素 c 表示實線部分長度杠娱，元素 a 表示虛線部分長度，元素 b 表示實線部分長度......谱煤，以此循環(huán)摊求。
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.setLineDash(數(shù)組);
...
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 將畫筆的落點處定在坐標(100, 100)處
context.moveTo(100, 100);
// 創(chuàng)建一條畫筆落點處到坐標(200, 200)的線段
context.lineTo(200, 200);
// 設置實線部分長度為4刘离，元虛線部分長度為6
context.setLineDash([4, 6]);
// 開始繪制
context.stroke();
</script>
</body>
</html>
繪制兩條平行直線
- 開啟一個新的繪制圖層
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.beginPath();
...
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象室叉，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 將畫筆的落點處定在坐標(100, 100)處
context.moveTo(100, 100);
// 創(chuàng)建一條畫筆落點處到坐標(300,100)的線段
context.lineTo(300, 100);
// 開始繪制
context.stroke();
// 開啟新的圖層
context.beginPath();
// 將畫筆的落點處定在坐標(100, 150)處
context.moveTo(100, 150);
// 創(chuàng)建一條畫筆落點處到坐標(300, 150)的線段
context.lineTo(300, 150);
// 開始繪制
context.stroke();
</script>
</body>
</html>
繪制一個三角形
- 創(chuàng)建從當前點回到起始點的路徑
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.closePath();
...
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 將畫筆的落點處定在坐標(100, 100)處
context.moveTo(100, 100);
// 創(chuàng)建一條從上一個點(100, 100)到坐標(100,300)的線段
context.lineTo(100, 300);
// 創(chuàng)建一條從上一個點(100,300)到坐標(300,300)的線段
context.lineTo(300, 300);
// 創(chuàng)建從當前點(300,300)回到起始點(100, 100)的路徑
context.closePath()
// 開始繪制
context.stroke();
</script>
</body>
</html>
線條樣式
- 設置線兩端的樣式
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
// 默認值硫惕，設置線兩端的樣式為平直的邊緣
context.lineCap = "butt" ;
// 設置線兩端的樣式為圓形線帽
context.lineCap = "round";
// 設置線兩端的樣式為正方形線帽
context.lineCap = "square";
...
- 設置兩條線相交時的連接樣式
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
// 默認值茧痕，設置兩條線相交時的連接樣式為尖角
context.lineJoin = "miter";
// 設置兩條線相交時的連接樣式為斜角
context.lineJoin = "bevel";
// 設置兩條線相交時的連接樣式為圓角
context.lineJoin = "round";
...
- 設置畫筆的顏色、漸變或模式
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.strokeStyle = XXX;
...
- 設置線寬（像素）恼除，不需要帶單位
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.lineWidth = XXX;
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象踪旷，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 設置線兩端的樣式為圓形線帽
context.lineCap = "round";
// 設置兩條線相交時的連接樣式為圓角
context.lineJoin = "round";
// 設置線條的顏色為紅色
context.strokeStyle = "red";
// 設置線條的寬度
context.lineWidth = "30";
// 將畫筆的落點處定在坐標(100, 100)處
context.moveTo(100, 100);
// 創(chuàng)建一條從上一個點(100, 100)到坐標(100,300)的線段
context.lineTo(100, 300);
// 開始繪制
context.stroke();
</script>
</body>
</html>
- 設置兩條線相交處內角與外角之間的距離
注意：只有當 context.lineJoin = "miter" 時，才有效豁辉。邊角的角度越小令野，斜接長度就會越大。 如果斜接長度超過 miterLimit 的值徽级，邊角會以 lineJoin 的 "bevel" 樣式來顯示彩掐。
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.miterLimit = XXX;
...
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 設置線條的寬度
context.lineWidth = "5";
// 將畫筆的落點處定在坐標(100, 100)處
context.moveTo(100, 100);
// 創(chuàng)建一條從上一個點(100, 100)到坐標(210,110)的線段
context.lineTo(210,110);
// 創(chuàng)建一條從上一個點(210,110)到坐標(100,120)的線段
context.lineTo(100, 120);
// 開始繪制
context.stroke();
// 開啟新的圖層
context.beginPath();
// 設置線條的寬度
context.lineWidth = "5";
// 設置兩條線相交處內角與外角之間的距離
context.miterLimit= "15"
// 將畫筆的落點處定在坐標(300, 100)處
context.moveTo(300, 100);
// 創(chuàng)建一條從上一個點(300, 100)到坐標(410,110)的線段
context.lineTo(410,110);
// 創(chuàng)建一條從上一個點(310,110)到坐標(300,320)的線段
context.lineTo(300, 120);
// 開始繪制
context.stroke();
</script>
</body>
</html>
程序運行結果
繪制一個紅色邊框的黑色三角形
- 設置用于填充繪制的圖形的顏色灰追、漸變或模式堵幽。
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.fillStyle = XXX;
...
- 填充繪制的圖形
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.fill();
...
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 設置畫筆的顏色為紅色
context.strokeStyle = "red";
// 設置線條的寬度
context.lineWidth= "5";
// 設置用于填充繪制的圖形的顏色
context.fillStyle = "black";
// 將畫筆的落點處定在坐標(100, 100)處
context.moveTo(100, 100);
// 創(chuàng)建一條從上一個點(100, 100)到坐標(100,300)的線段
context.lineTo(100, 300);
// 創(chuàng)建一條從上一個點(100,300)到坐標(300,300)的線段
context.lineTo(300, 300);
// 創(chuàng)建從當前點(300,300)回到起始點(100, 100)的路徑
context.closePath()
// 開始繪制
context.stroke();
// 填充繪制圖形
context.fill();
</script>
</body>
</html>
繪制矩形
- 創(chuàng)建矩形
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.rect(x, y, width, height);
...
1）參數(shù)說明：
參數(shù) x：矩形左上角的 x 坐標弹澎。
參數(shù) y：矩形左上角的 y 坐標朴下。
參數(shù) width：矩形的寬度，以像素計苦蒿。
參數(shù) height：矩形的高度殴胧，以像素計。
2） 注意事項：
context.rect(x, y, width, height); 只是創(chuàng)建了矩形佩迟，并沒有繪制出來团滥。因此，創(chuàng)建完成后需使用 context.stroke(); 來繪制报强。
3）示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象灸姊，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 創(chuàng)建矩形
context.rect(50, 50, 200, 100);
// 開始繪制
context.stroke();
</script>
</body>
</html>
- 繪制已填充的矩形
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.fillRect(x, y, width, height);
...
1）參數(shù)說明：
參數(shù) x：矩形左上角的 x 坐標。
參數(shù) y：矩形左上角的 y 坐標秉溉。
參數(shù) width：矩形的寬度力惯，以像素計。
參數(shù) height：矩形的高度召嘶，以像素計父晶。
2）默認的填充顏色是黑色∨可以使用 fillStyle 屬性來設置用于填充繪圖的顏色甲喝、漸變或模式。
3）示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象铛只，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 設置填充的顏色
context.fillStyle = "yellow";
// 繪制已填充的矩形
context.fillRect(50, 50, 200, 100);
</script>
</body>
</html>
- 繪制未填充矩形
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.strokeRect(x, y, width, height);
...
1）參數(shù)說明：
參數(shù) x：矩形左上角的 x 坐標埠胖。
參數(shù) y：矩形左上角的 y 坐標。
參數(shù) width：矩形的寬度格仲，以像素計押袍。
參數(shù) height：矩形的高度，以像素計凯肋。
2）筆觸的默認顏色是黑色谊惭。
3）可以使用 strokeStyle 屬性來設置筆觸的顏色、漸變或模式侮东。
4）示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象圈盔，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 設置邊框顏色
context.strokeStyle = "red";
// 繪制矩形
context.strokeRect(50, 50, 200, 100);
</script>
</body>
</html>
- 清除矩形
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.clearRect(x, y, width, height);
...
1）參數(shù)說明：
參數(shù) x：要清除的矩形左上角的 x 坐標。
參數(shù) y：要清除的矩形左上角的 y 坐標悄雅。
參數(shù) width：要清除的矩形的寬度驱敲，以像素計。
參數(shù) height：要清除的矩形的高度宽闲，以像素計众眨。
小技巧：
當 x = 0握牧，y = 0，width = canvas.width娩梨，height = canvas.height 時沿腰，則可以清除畫布上的矩形
2）示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 繪制矩形
context.strokeRect(50, 50, 200, 100);
// 清除矩形
context.clearRect(0, 0, 1000, 1000);
</script>
</body>
</html>
繪制圓弧
- 創(chuàng)建圓弧
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.arc(x, y, r, sAngle, eAngle, counterclockwise);
...
1）參數(shù)說明：
參數(shù) x：圓中心的 x 坐標狈定。
參數(shù) y：圓中心的 y 坐標颂龙。
參數(shù) r：圓的半徑。
參數(shù) sAngle：起始角弧度（圓的三點鐘位置是0度）纽什。
參數(shù) eAngle：結束角弧度（圓的三點鐘位置是0度）措嵌。
參數(shù) counterclockwise：規(guī)定逆時針還是順時針繪圖。f'alse = 順時針芦缰，true = 逆時針企巢。
2） 角度和弧度的關系：角度/弧度 = 180/pi
3）創(chuàng)建完圓弧后需使用 context.stroke(); 繪制創(chuàng)建的圓弧。
4）示例：繪制一個圓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象饺藤，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 創(chuàng)建一個圓（2π = 360°）：圓心坐標為 (100, 100)包斑，半徑為50
context.arc(100, 100, 50, 0, 2*Math.PI);
// 繪制圓
context.stroke();
</script>
</body>
</html>
5）示例：繪制圓上任意一點
圓上任意一點坐標：x = ox + r*cos(弧度)，y = oy + r*cos(弧度)
ox：圓心的 x 坐標涕俗。
oy：圓心的 y 坐標罗丰。
r：圓的半徑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象再姑，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 創(chuàng)建一個圓（2π = 360°）：圓心坐標為 (100, 100)萌抵，半徑為50
context.arc(100, 100, 50, 0, 2*Math.PI);
// 繪制圓
context.stroke();
// 開啟一個新的圖層
context.beginPath();
// 設置點的邊框色
context.strokeStyle = "red";
// 設置點的填充色
context.fillStyle = "yellow";
// 點的坐標
var n = Math.random();
var x = 100 + Math.cos(Math.PI / n) * 50;
var y = 100 + Math.sin(Math.PI / n) * 50;
// 創(chuàng)建點
context.arc(x, y, 10, 0, 2*Math.PI);
// 繪制點
context.stroke();
// 填充點
context.fill();
</script>
</body>
</html>
繪制文本
- 文本屬性
1）設置字體大小
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.font = "20px 微軟雅黑";
...
2）設置字體水平對齊方式
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
// start：默認值，文本在指定的位置（繪制文字方法中的坐標）開始元镀。
// end：文本在指定的位置（繪制文字方法中的坐標）結束稳诚。
// center：文本的中心被放置在指定的位置（繪制文字方法中的坐標）脆淹。
// left：文本在指定的位置（繪制文字方法中的坐標）開始宣赔。
// right：文本在指定的位置（繪制文字方法中的坐標）結束汞斧。
context.textAlign= "left";
...
2）設置字體垂直對齊方式
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
// alphabetic：默認值，文本基線是普通的字母基線遇革。
// top：文本基線是 em 方框的頂端卿闹。
// hanging：文本基線是懸掛基線。
// middle：文本基線是 em 方框的正中萝快。
// ideographic：文本基線是表意基線锻霎。
// bottom：文本基線是 em 方框的底端。
context.textBaseline = "middle";
...
textBaseline 屬性在不同的瀏覽器上效果不同揪漩，特別是使用 "hanging" 或 "ideographic" 時旋恼。
em方框
3）設置文字陰影效果
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
// 設置文字陰影的顏色
context.shadowColor = XXX;
// 設置文字陰影的水平偏移量，正數(shù)表示向右偏移奄容，負數(shù)表示向左偏移
context.shadowOffsetX = XXX;
// 設置文字陰影的垂直偏移量冰更，正數(shù)表示向下偏移产徊，負數(shù)表示向上偏移
context.shadowOffsetY = XXX;
// 設置文字陰影的模糊度
context.shadowBlur = XXX;
...
- 繪制填充文本
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.fillText(text, x, y);
...
1）參數(shù)說明：
參數(shù) text：文本內容
參數(shù) x：開始繪制文本的 x 坐標位置（相對于畫布）。
參數(shù) y：開始繪制文本的 y 坐標位置（相對于畫布）冬殃。
2）默認的填充顏色是黑色囚痴。可以使用 fillStyle 屬性來設置用于填充繪圖的顏色审葬、漸變或模式。
3）示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象奕谭，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 設置文字大小
context.font = "20px 微軟雅黑";
// 設置文字水平對齊方式：在指定的位置（fillText()中的坐標）開始
context.textAlign= "left";
// 設置文字垂直對齊方式
context.textBaseline = "middle";
// 設置文字陰影的顏色
context.shadowColor = "#EE3030";
// 設置文字陰影的水平偏移量
context.shadowOffsetX = 20;
// 設置文字陰影的垂直偏移量
context.shadowOffsetY = 20;
// 設置文字陰影的模糊度
context.shadowBlur = 3;
// 設置填充顏色
context.fillStyle = "red";
// 繪制文本
context.fillText("關注微信公眾：remaizhan", 100, 100);
</script>
</body>
</html>
- 繪制鏤空文本（未填充）
注意：字體越小涣觉，鏤空的效果越不明顯，建議字體不要小于15px血柳。
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.strokeText(text, x, y);
...
1）參數(shù)說明：
參數(shù) text：文本內容
參數(shù) x：開始繪制文本的 x 坐標位置（相對于畫布）官册。
參數(shù) y：開始繪制文本的 y 坐標位置（相對于畫布）。
2）默認的筆觸顏色是黑色难捌∠ツ可以使用 strokeStyle 屬性來設置筆觸的顏色、漸變或模式根吁。
3）示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象员淫，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 設置文字大小
context.font = "20px 微軟雅黑";
// 設置文字水平對齊方式：在指定的位置（fillText()中的坐標）開始
context.textAlign= "left";
// 設置文字垂直對齊方式
context.textBaseline = "middle";
// 設置文字陰影的顏色
context.shadowColor = "#EE3030";
// 設置文字陰影的水平偏移量
context.shadowOffsetX = 20;
// 設置文字陰影的垂直偏移量
context.shadowOffsetY = 20;
// 設置文字陰影的模糊度
context.shadowBlur = 3;
// 設置填充顏色
context.strokeStyle = "red";
// 繪制文本
context.strokeText("關注微信公眾：remaizhan", 100, 100);
</script>
</body>
</html>
繪制圖片
- 將圖片繪制到畫布的指定位置
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.drawImage(img, x, y);
...
1）參數(shù)說明：
參數(shù) img：規(guī)定要使用的圖像。
參數(shù) x：在畫布上放置圖像的 x 坐標位置击敌。
參數(shù) y：在畫布上放置圖像的 y 坐標位置介返。
2）當圖像的大小超出畫布的大小時，超出的部分將不會被顯示出來沃斤。
3）示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象圣蝎，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 加載圖片
var img = document.createElement("img");
img.src = "1.jpg";
img.onload = function() {
// 將圖片繪制到畫布的(0, 0)坐標處
context.drawImage(img, 0, 0);
}
</script>
</body>
</html>
- 將圖片繪制到畫布的指定位置，且指定繪制后的大泻馄俊（伸展或縮小圖片）
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.drawImage(img, x, y, width, height);
...
1）參數(shù)說明：
參數(shù) img：規(guī)定要使用的圖像徘公。
參數(shù) x：在畫布上放置圖像的 x 坐標位置。
參數(shù) y：在畫布上放置圖像的 y 坐標位置哮针。
參數(shù) width：要使用的圖像的寬度（伸展或縮小圖像）关面。
參數(shù) height：要使用的圖像的高度（伸展或縮小圖像）。
2）因保持 width/height = img.width/img.height诚撵，否則繪制后的圖片會失幀缭裆。
3）示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 加載圖片
var img = document.createElement("img");
img.src = "1.jpg";
img.onload = function() {
// 將圖片繪制到畫布的(0, 0)坐標處寿烟，且繪制后的圖片大小寬為400澈驼，高為300
context.drawImage(img, 0, 0, 400, 300);
}
</script>
</body>
</html>
- 將圖片上的指定區(qū)域繪制到畫布上的指定區(qū)域（剪切圖片）
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
...
context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
...
1）參數(shù)說明：
參數(shù) img：規(guī)定要使用的圖像。
參數(shù) sx：從圖像的 sx 坐標位置開始剪切筛武。
參數(shù) sy：從圖像的 sy 坐標位置開始剪切缝其。
參數(shù) swidth：剪切的寬度挎塌。
參數(shù) sheight：剪切的高度。
參數(shù) x：在畫布上放置圖像的 x 坐標位置内边。
參數(shù) y：在畫布上放置圖像的 y 坐標位置榴都。
參數(shù) width：要使用的圖像的寬度（伸展或縮小圖像）。
參數(shù) height：要使用的圖像的高度（伸展或縮小圖像）漠其。
2）因保持 width/height = swidth/sheight嘴高，否則繪制后的圖片會失幀。
3）示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象和屎，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 加載圖片
var img = document.createElement("img");
img.src = "1.jpg";
img.onload = function() {
// 從圖片的 (475, 500) 坐標處開始剪切寬為120高為150的圖片拴驮，然后將其繪制到畫布的 (100, 100) 坐標處，繪制后的圖片寬為60柴信，高為75
context.drawImage(img, 475, 500, 120, 150, 100, 100, 60, 75);
}
</script>
</body>
</html>
漸變
- 創(chuàng)建從坐標(x0, y0)到坐標(x1, y1)的線性漸變
context.createLinearGradient(x0, y0, x1, y1);
- 創(chuàng)建從以坐標(x0, y0)為圓心套啤，r0為半徑的圓到以坐標(x1, y1)為圓心，r1位半徑的圓的徑向漸變
context.createRadialGradient(x0, y0, r0, x1, y1, r1);
- 設置漸變的顏色和位置
var gradient1 = context.createLinearGradient(x0, y0, x1, y1);
gradient1.addColorStop(stop, color);
var gradient2 = context.createRadialGradient(x0, y0, r0, x1, y1, r1);
gradient2.addColorStop(stop, color);
stop：介于 0.0 與 1.0 之間的值随常，表示漸變中開始(0.0)與結束(1.0)之間的位置潜沦。
color：顏色。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!-- 創(chuàng)建 canvas 元素-->
<canvas width="1000" height="1000"></canvas>
<script type="text/javascript">
// 獲取 canvas 元素
var canvas = document.querySelector("canvas");
// 創(chuàng)建 context 對象绪氛，相當于打開了畫圖工具
var context = canvas.getContext("2d");
// 創(chuàng)建線性漸變
var lineGradient = context.createLinearGradient(100, 100, 300, 100);
// 添加漸變顏色
lineGradient.addColorStop(0, "blue");
lineGradient.addColorStop(0.5, "red");
lineGradient.addColorStop(1, "yellow");
// 設置用于填充繪制的圖形的漸變方案
context.fillStyle = lineGradient;
// 繪制用于填充漸變方案的矩形
context.rect(100, 100, 200, 100);
// 填充圖形
context.fill();
// 開啟一個新的圖層
context.beginPath();
// 創(chuàng)建徑向漸變
var radialGradient = context.createRadialGradient(250, 450, 50, 250, 450, 150);
// 添加漸變顏色
radialGradient.addColorStop(0, "blue");
radialGradient.addColorStop(0.5, "red");
radialGradient.addColorStop(1, "yellow");
// 設置用于填充繪制的圖形的漸變方案
context.fillStyle = radialGradient;
// 繪制用于填充漸變方案的矩形
context.rect(100, 300, 300, 300);
// 填充圖形
context.fill();
</script>
</body>
</html>
