13-1 畫布繪製基本線條

時間 2019-11-30

標籤畫布繪製基本線條简体版

原文原文鏈接

趨勢 Canvas+WebSocketjavascript

咱們能用Canvas作些什麼？html

1. 遊戲：毫無疑問，遊戲在HTML5領域具備舉足輕重的地位。HTML5在基於Web的圖像顯示方面比Flash更加立體、更加精巧，Ohad認爲運用Canvas製做的圖像可以令HTML5遊戲在流暢度和跨平臺方面發揮更大的潛力。java

2. 圖表製做：圖表製做時常被人們忽略，但不管企業內部仍是企業間交流合做都離不開圖表。如今一些開發者使用HTML/CSS完成圖標製做，但Ohad認爲你們徹底能夠用Canvas來實現。固然，使用SVG（可縮放矢量圖形）來完成圖表製做也是很是好的方法。canvas

3. banner廣告：Flash曾經輝煌的時代，智能手機還不曾出現。如今以及將來的智能機時代，HTML5技術可以在banner廣告上發揮巨大做用，用Canvas實現動態的廣告效果再合適不過。瀏覽器

4. 模擬器：Ohad認爲，不管從視覺效果仍是核心功能方面來講，模擬器產品能夠徹底由JavaScript來實現。編輯器

5. 遠程計算機控制：Canvas可讓開發者更好地實現基於Web的數據傳輸，構建一個完美的可視化控制界面。字體

6. 字體設計：對於字體的自定義渲染將徹底能夠基於Web，使用HTML5技術進行實現。網站

7. 圖形編輯器：Ohad預測，圖形編輯器將可以100%基於Web實現。插件

8. 其餘可嵌入網站的內容：相似圖表、音頻、視頻，還有許多元素可以更好地與Web融合，而且不須要任何插件。Ohad呼籲你們繼續挖掘Canvas的潛力，運用HTML5技術創造更多價值。設計

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>

<script type="text/javascript">
	//經過代碼檢測瀏覽器是否支持畫布
	try {
		document.createElement("canvas").getContext("2d");	
		alert("您的瀏覽器支持HTML5畫布");	
	}catch (e) {
		alert("您的瀏覽器不支持HTML5畫布");				
	}
	
	//繪製對角線
	function drawCanvas() {
		
		//得到畫布對象
		var canvas = document.getElementById('canvas1');
		//得到context對象
		var context = canvas.getContext('2d');
		
		//用絕對座標繪製一條路徑
		context.beginPath();//起始一條路徑
		context.moveTo(70,140);//把路徑移動到畫布中的指定點，不建立線條
		context.lineTo(140,70);//添加一個新點，而後在畫布中建立從該點到最後指定點的線條
		
		context.strokeStyle="#ff0000";//設置畫筆顏色
		context.stroke();//將這條路徑繪製到canvas上		
	}
	
	window.onload = function() {
		drawCanvas();	
	};
</script>

</head>

<body>

<canvas id="canvas1" style="border:solid 1px #36F;" height="200" width="200">
	您的瀏覽器不支持畫布哦
</canvas>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。