關於html5畫布（canvas）

時間 2019-12-06

標籤關於 html5 html 畫布 canvas 欄目 HTML5 简体版

原文原文鏈接

canvas:用於繪製圖像（經過腳本，一般是 JavaScript）。元素自己並無繪製能力（它僅僅是圖形的容器）您必須使用腳原本完成實際的繪圖任務.

getContext() 方法可返回一個對象，該對象提供了用於在畫布上繪圖的方法和屬性。

經常使用屬性：

fillStyle：設置或返回用於填充繪畫的顏色、漸變或模式

strokeStyle：設置或返回用於筆觸的顏色、漸變或模式

shadowColor：設置或返回用於陰影的顏色

shadowBlur：設置或返回用於陰影的模糊級別

font：設置或返回文本內容的當前字體屬性

textAlign：設置或返回文本內容的當前對齊方式

經常使用方法：

createLinearGradient() 建立線性漸變（用在畫布內容上）
createPattern() 在指定的方向上重複指定的元素
lineWidth 設置或返回當前的線條寬度
rect() 建立矩形
fillRect() 繪製「被填充」的矩形
strokeRect() 繪製矩形（無填充）
clearRect() 在給定的矩形內清除指定的像素
fill() 填充當前繪圖（路徑）
stroke() 繪製已定義的路徑
beginPath() 起始一條路徑，或重置當前路徑
moveTo() 把路徑移動到畫布中的指定點，不建立線條
closePath() 建立從當前點回到起始點的路徑
lineTo() 添加一個新點，而後在畫布中建立從該點到最後指定點的線條
quadraticCurveTo() 建立二次貝塞爾曲線
bezierCurveTo() 建立三次方貝塞爾曲線
arc() 建立弧/曲線（用於建立圓形或部分圓）
scale() 縮放當前繪圖至更大或更小
rotate() 旋轉當前繪圖
translate() 從新映射畫布上的 (0,0) 位置
fillText() 在畫布上繪製「被填充的」文本
strokeText() 在畫布上繪製文本（無填充）
createImageData() 建立新的、空白的 ImageData 對象
getImageData() 返回 ImageData 對象，該對象爲畫布上指定的矩形複製像素數據
save() 保存當前環境的狀態
restore() 返回以前保存過的路徑狀態和屬性

-------------------
利用畫布和javascript咱們能夠實現不少動畫效果，雖然css+javascript也能夠實現動畫的效果，可是css+javascript執行效率沒有畫布和javascript高，因爲css+javascript每執行一次，都會刷新一次頁面，頁面整個內容會加載一次。可是畫布+javascript不會，每次都是重新加載畫布的內容，真個頁面的佈局不會打亂。因此從執行效率來講，仍是畫布和javascript有優點。javascript

下面是用畫布和javascript結合作的一個動畫效果：css

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style>
	*{margin: 0;padding: 0}
	body{
	text-align: center;
	}
	canvas{
	margin: 20px auto;
	border: 1px solid;
	}
	audio{
	position: absolute;
	top: 100px;
	left: 950px;
	}
	</style>
	</head>
	<body>
	<canvas id="myCanvas" width="900" height="600"></canvas>
	<audio src="12345.mp3" controls="controls" autoplay="autoplay">你的瀏覽器不支持音頻播放</audio>
	</body>
	<script>
	var c=document.getElementById("myCanvas");
	var cxt=c.getContext("2d");
	back();
	id1=setTimeout("head()",10);
	id2=setTimeout("body()",1000);
	id3=setTimeout("hand()",2000);
	id4= setTimeout("foot()",3000);
	id5=setTimeout("feeler()",4000);
	id6=setTimeout("shan()",6000);

	function back(){

	cxt.fillStyle="black";
	cxt.beginPath();
	cxt.fillRect(250,50,400,500);
	cxt.closePath();


	}
	function head(){

	cxt.fillStyle="#5acc42";
	cxt.beginPath();
	cxt.arc(450,200,100,Math.PI,2*Math.PI);
	cxt.closePath();
	cxt.fill();
	cxt.fillStyle="black";
	cxt.beginPath();
	cxt.arc(410,150,12,0,2*Math.PI);
	cxt.arc(490,150,12,0,2*Math.PI);
	cxt.closePath();
	cxt.fill();


	}
	function body(){

	cxt.fillStyle="#5acc42";
	cxt.beginPath();
	cxt.fillRect(350,220,200,180);
	cxt.closePath();

	cxt.beginPath();
	cxt.fillRect(370,400,160,20);
	cxt.closePath();

	cxt.beginPath();
	cxt.arc(370,400,20,0,2*Math.PI);
	cxt.arc(530,400,20,0,2*Math.PI);
	cxt.closePath();
	cxt.fill();

	}

	function hand(){
	cxt.fillStyle="#5acc42";
	cxt.beginPath();
	cxt.fillRect(290,250,40,100);
	cxt.fillRect(570,250,40,100);
	cxt.closePath();

	cxt.beginPath();
	cxt.arc(310,250,20,0,2*Math.PI);
	cxt.arc(310,350,20,0,2*Math.PI);
	cxt.closePath();
	cxt.fill();

	cxt.beginPath();
	cxt.arc(590,250,20,0,2*Math.PI);
	cxt.arc(590,350,20,0,2*Math.PI);
	cxt.closePath();
	cxt.fill();

	}

	function foot(){
	cxt.fillStyle="#5acc42";
	cxt.beginPath();
	cxt.fillRect(380,419,40,80);
	cxt.fillRect(480,419,40,80);
	cxt.closePath();

	cxt.beginPath();
	cxt.arc(400,500,20,0,2*Math.PI);
	cxt.closePath();
	cxt.fill();

	cxt.beginPath();
	cxt.arc(500,500,20,0,2*Math.PI);
	cxt.closePath();
	cxt.fill();

	}

	function feeler(){
	cxt.fillStyle="#5acc42";
	cxt.beginPath();
	cxt.save();
	cxt.translate(390,75);
	cxt.rotate(-30*Math.PI/180);
	cxt.fillRect(-20,0,8,40);
	cxt.closePath();
	cxt.beginPath();
	cxt.arc(-16,0,4,0,2*Math.PI);
	cxt.closePath();
	cxt.restore();
	cxt.fill();

	cxt.beginPath();
	cxt.save();
	cxt.translate(500,75);
	cxt.rotate(30*Math.PI/180);
	cxt.fillRect(20,-5,8,40);
	cxt.closePath();
	cxt.beginPath();
	cxt.arc(24,-5,4,0,2*Math.PI);
	cxt.closePath();
	cxt.restore();
	cxt.fill();
	}

	function shan(){
	cxt.clearRect(250,50,400,500);
	back();
	clearTimeout(id1);
	clearTimeout(id2);
	clearTimeout(id3);
	clearTimeout(id4);
	clearTimeout(id5);
	clearTimeout(id6);
	setTimeout("shan1()",500);
	}
	function shan1(){
	clearTimeout(id1);
	clearTimeout(id2);
	clearTimeout(id3);
	clearTimeout(id4);
	clearTimeout(id5);
	clearTimeout(id6);
	head();
	body();
	hand();
	foot();
	feeler();

	setTimeout("shan()",1000);
	}


	</script>
	</html>