Canvas 詳細教程(一)

文章目錄

Canvas 詳細教程(一)

1：基本用法

<canvas id="canvas"></canvas>

初始化寬度：300
初始化高度：150

canvas起初是空白的，我們可以添加邊框並查看。

<style>
	canvas{
		border:1px solid black;
	}
</style>

2：獲取 Canvas DOM 對象

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

檢查瀏覽器的支持性：

	var canvas = document.getElementById('canvas');
	if (canvas.getContext){
		var ctx = canvas.getContext('2d');
	} else {
		//不支持
	}

3：繪製矩形

fillRect(x, y, width, height);

x,y：起始點 x 座標，y 座標
width,height：矩形的寬度和高度

陰影：

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.fillRect(25, 25, 100, 100);
			
		} else {
			//不支持
		}
	}
	draw();

清除：

clearRect(x, y, width, height);

x,y：起始點 x 座標，y 座標
width,height：矩形的寬度和高度

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.fillRect(25, 25, 100, 100);
			ctx.clearRect(45, 45, 60, 60);
			
		} else {
			//不支持
		}
	}
	draw();

邊框：

strokeRect(x, y, width, height);

x,y：起始點 x 座標，y 座標
width,height：矩形的寬度和高度

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.strokeRect(25, 25, 100, 100);
			
		} else {
			//不支持
		}
	}
	draw();

4：繪製路徑

方法	描述
beginPath()	新建路徑
closePath()	閉合路徑
stroke()	通過線條來繪製圖形輪廓。
fill()	填充路徑的內容區域

畫一條線：

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.beginPath();
			ctx.moveTo(10,10);
			ctx.lineTo(80,80);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

當調用beginPath()之後，或者canvas剛建的時候，第一條路徑構造命令通常被視爲是moveTo（）

繪製一個三角形：

調用 closePath() 進行閉合，如果已經閉合，該函數則什麼都不會做。

			ctx.beginPath();
			ctx.moveTo(10,10);
			ctx.lineTo(80,80);
			ctx.lineTo(130,30);
			ctx.closePath();
			ctx.stroke();

填充三角形：

			ctx.beginPath();
			ctx.moveTo(10,10);
			ctx.lineTo(80,80);
			ctx.lineTo(130,30);
			ctx.closePath();
			ctx.stroke();
			ctx.fill();

5：圓弧

繪製圓弧或者圓，我們使用arc()方法

arc(x, y, radius, startAngle, endAngle, anticlockwise)

參數	描述
x	圓心 x 座標
y	圓心 y 座標
radius	圓的半徑
startAngle	開始點
endAngle	結束點
anticlockwise	false:順時針 / true:逆時針

繪製圓：

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.beginPath();
			ctx.arc(50, 50, 30, 0, 2 * Math.PI, false);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

繪製半圓：

			ctx.beginPath();
			ctx.arc(50, 50, 30, 0, Math.PI, false);
			ctx.stroke();

6：二次貝塞爾曲線

quadraticCurveTo(cp1x, cp1y, x, y)

cp1x,cp1y：控制點
x,y：結束點

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			// 二次貝塞爾曲線
			ctx.beginPath();
			ctx.moveTo(20, 100);
			ctx.quadraticCurveTo(100, 30, 180, 100);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

7：三次貝塞爾曲線

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

cp1x,cp1y：控制點 1
cp2x,cp2y：控制點 2
x,y：結束點

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			//三次貝塞爾曲線
			ctx.beginPath();
			ctx.moveTo(20, 100);
			ctx.bezierCurveTo(70, 30, 70, 20, 180, 100);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

8：色彩

方法	描述
fillStyle	設置圖形的填充顏色。
strokeStyle	設置圖形輪廓的顏色。

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.strokeStyle = "#ed3f14"
			ctx.strokeRect(25, 25, 100, 100);
			
		} else {
			//不支持
		}
	}
	draw();

			ctx.fillStyle = "#ed3f14"
			ctx.fillRect(25, 25, 100, 100);

9：透明度

方法	描述
globalAlpha	這個屬性影響到 canvas 裏所有圖形的透明度，有效的值範圍是 0.0 （完全透明）到 1.0（完全不透明），默認是 1.0。

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.fillStyle = "#ed3f14"
			ctx.fillRect(25, 25, 100, 100);
			ctx.globalAlpha = 0.2
			ctx.fillStyle = "#19be6b"
			ctx.fillRect(25, 25, 50, 50);
			
		} else {
			//不支持
		}
	}
	draw();

10：線型樣式

方法	描述
lineWidth	線條寬度
lineCap	線條末端樣式
lineJoin	線條與線條間接合處的樣式
miterLimit	限制當兩條線相交時交接處最大長度
getLineDash()	返回一個包含當前虛線樣式，長度爲非負偶數的數組
setLineDash(segments)	設置當前虛線樣式
lineDashOffset	設置虛線樣式的起始偏移量

lineWidth ：線條寬度

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.lineWidth = 1;
			ctx.beginPath();
			ctx.moveTo(5,30);
			ctx.lineTo(140,30);
			ctx.stroke();
			ctx.lineWidth = 5;
			ctx.beginPath();
			ctx.moveTo(5,60);
			ctx.lineTo(140,60);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

lineCap：線條末端樣式

butt（默認）
round
square

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.lineWidth = 8;
			ctx.lineCap = "butt";
			ctx.beginPath();
			ctx.moveTo(5,30);
			ctx.lineTo(140,30);
			ctx.stroke();
			ctx.lineWidth = 8;
			ctx.lineCap = "round";
			ctx.beginPath();
			ctx.moveTo(5,60);
			ctx.lineTo(140,60);
			ctx.stroke();
			ctx.lineWidth = 8;
			ctx.lineCap = "square";
			ctx.beginPath();
			ctx.moveTo(5,90);
			ctx.lineTo(140,90);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

lineJoin：線條與線條間接合處的樣式

round（默認）
bevel
miter

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.lineWidth = 8;
			ctx.lineJoin = "round";
			ctx.beginPath();
			ctx.moveTo(5,30);
			ctx.lineTo(30,60);
			ctx.lineTo(55,30);
			ctx.stroke();
			ctx.lineWidth = 8;
			ctx.lineJoin = "bevel";
			ctx.beginPath();
			ctx.moveTo(5,60);
			ctx.lineTo(30,90);
			ctx.lineTo(55,60);
			ctx.stroke();
			ctx.lineWidth = 8;
			ctx.lineJoin = "miter";
			ctx.beginPath();
			ctx.moveTo(5,90);
			ctx.lineTo(30,120);
			ctx.lineTo(55,90);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

miterLimit：限制當兩條線相交時交接處最大長度

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.lineWidth = 8;	
			ctx.lineJoin = "miter";
			ctx.beginPath();
			ctx.moveTo(5,30);
			ctx.lineTo(30,60);
			ctx.lineTo(55,30);
			ctx.stroke();
			ctx.lineWidth = 8;	
			ctx.lineJoin = "miter";
			ctx.miterLimit = 1;
			ctx.beginPath();
			ctx.moveTo(5,60);
			ctx.lineTo(30,90);
			ctx.lineTo(55,60);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

setLineDash：置當前虛線樣式
lineDashOffset：設置虛線樣式的起始偏移量

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
		    ctx.setLineDash([4, 2]);
		    ctx.lineDashOffset = -0;
			ctx.strokeStyle = "#2d8cf0"
		    ctx.strokeRect(10,10, 100, 100);
			
		    ctx.setLineDash([2, 2]);
		    ctx.lineDashOffset = -5;
			ctx.strokeStyle = "#19be6b"
		    ctx.strokeRect(30,30, 100, 100);
			
		} else {
			//不支持
		}
	}
	draw();

11：漸變

createLinearGradient(x1, y1, x2, y2)

x1,y1：漸變的起點
x2,y2：漸變的終點

addColorStop(position, color)

position：參數必須是一個 0.0 與 1.0 之間的數值，表示漸變中顏色所在的相對位置。（0.5爲正中間）
color：有效的 CSS 顏色值

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
		    var lineargradient = ctx.createLinearGradient(0,0,150,150);
			lineargradient.addColorStop(0,'#ed3f14');
			lineargradient.addColorStop(1,'#ff9900');
			ctx.fillStyle = lineargradient;
			ctx.fillRect(0,0,150,150)
						
		} else {
			//不支持
		}
	}
	draw();

createRadialGradient(x1, y1, r1, x2, y2, r2)

x1,y1,r1：以 x1,y1 爲原點，半徑爲 r1 的圓。
x2,y2,r2：以 x2,y2 爲原點，半徑爲 r2 的圓。

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
		    var radgrad = ctx.createRadialGradient(30,30,30,30,30,15);
		    radgrad.addColorStop(0, 'white');
			radgrad.addColorStop(0.5, '#ff9900');
		    radgrad.addColorStop(1, '#ed3f14');
			ctx.fillStyle = radgrad;
			ctx.fillRect(0,0,150,150)
						
		} else {
			//不支持
		}
	}
	draw();

12：圖案樣式

createPattern(image, type)

image：可以是一個 Image 對象的引用，或者另一個 canvas 對象。
type：repeat，repeat-x，repeat-y 和 no-repeat。

方法	描述
repeat	垂直和水平重複背景圖像。如果最後一張圖像不合適，將對其進行裁剪
repeat-x	背景圖像僅水平重複
repeat-y	背景圖像僅垂直重複
no-repeat	背景圖像不重複。圖片只會顯示一次

與 drawImage 有點不同，你需要確認 image 對象已經裝載完畢，否則圖案可能效果不對。

使用 Image 對象的 onload handler 來確保設置圖案之前圖像已經裝載完畢

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
		    // 創建新 image 對象
		    var img = new Image();
		    img.src = "./test.png"
		    img.onload = function() {

			// 創建圖案
			var pattern = ctx.createPattern(img, 'repeat');
				ctx.fillStyle = pattern;
				ctx.fillRect(0, 0, 300, 150);
		    }
						
		} else {
			//不支持
		}
	}
	draw();

13：陰影

方法	描述
shadowOffsetX	設定陰影在 X 軸的延伸距離，負值表示陰影會往左延伸，正值則表示會往右延伸。（默認值：0）
shadowOffsetY	設定陰影在 Y 軸的延伸距離，負值表示陰影會往上延伸，正值則表示會往下延伸。（默認值：0）
shadowBlur	設定陰影的模糊程度。（默認值：0）
shadowColor	設定陰影的顏色。（默認全透明黑色）

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
		    ctx.shadowOffsetX = -5;
		    ctx.shadowOffsetY = 5;
		    ctx.shadowBlur = 3;
		    ctx.shadowColor = "#495060";
			ctx.strokeRect(30,30,50,50)
						
		} else {
			//不支持
		}
	}
	draw();

14：繪製文本

fillText(text, x, y [, maxWidth])

text：文本內容
x,y：在 x,y 位置填充指定的文本
maxWidth：繪製的最大寬度

strokeText(text, x, y [, maxWidth])

text：文本內容
x,y：在 x,y 位置繪製文本邊框
maxWidth：繪製的最大寬度

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
		    ctx.font = "48px serif";
			ctx.fillText("Hello world", 15, 50);
			
			ctx.font = "48px serif";
			ctx.strokeText("Hello world", 15, 100);
						
		} else {
			//不支持
		}
	}
	draw();

方法	描述
font	繪製文本的樣式（默認字體：10px sans-serif）
textAlign	文本對齊選項，start, end, left, right 或 center（start）
textBaseline	基線對齊選項，top, hanging, middle, alphabetic, ideographic, bottom（默認值：alphabetic）
direction	文本方向，ltr, rtl, inherit（默認值：inherit）

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
		    ctx.font = "38px 'Lucida Console', Monaco, monospace";
			ctx.fillStyle = "#2d8cf0"
			ctx.fillText("Hello world", 15, 50);
						
		} else {
			//不支持
		}
	}
	draw();

測量文本寬度：

measureText()

measureText()：將返回一個 TextMetrics對象的寬度、所在像素等屬性。

		    ctx.font = "38px 'Lucida Console', Monaco, monospace";
			ctx.fillStyle = "#2d8cf0"
			ctx.fillText("Hello world", 15, 50);
			var text = ctx.measureText("Hello world");
			console.log(text.width); // 251;

Canvas 詳細教程(一)

Canvas 詳細教程(一)

文章目錄

1：基本用法

2：獲取 Canvas DOM 對象

3：繪製矩形

4：繪製路徑

5：圓弧

6：二次貝塞爾曲線

7：三次貝塞爾曲線

8：色彩

9：透明度

10：線型樣式

11：漸變

12：圖案樣式

13：陰影

14：繪製文本

EXCEL中下拉菜單中添加新選項或者刪除選項

京東科技數字化營銷能力的演進與最佳實踐| 京東雲技術團隊

Python 爬蟲：Spring Boot 反爬蟲的成功案例

Java中止線程的方式

[轉帖]Oracle Exadata 學習筆記之核心特性Part1

HTTP協議相關文檔

java 有趣又酷的技巧

微信小程序組件教程

Canvas 詳細教程(二)

Spring Boot 攔截器配置及靜態頁面訪問

Canvas 詳細教程(一)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結