Html5 Canvas開發之滑鼠繪圖和方塊移動

阿新 • • 發佈：2019-01-15

1.滑鼠繪圖

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
body{ background:black;}
#c1{ background:white;}
span{ color:white;}
</style>
<script>

window.onload = function(){
	var oC = document.getElementById('c1');
	
	var oGC = oC.getContext('2d');  
	
	oC.onmousedown = function(ev){
		var ev = ev || window.event;
		oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
		document.onmousemove = function(ev){
			var ev = ev || window.event;
			oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
			oGC.stroke();
		};
		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
		};
	};
	
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
	<span>不支援canvas瀏覽器</span>
</canvas> <!--預設：寬300 高150-->
</body>
</html>

2.方塊移動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
body{ background:black;}
#c1{ background:white;}
span{ color:white;}
</style>
<script>

window.onload = function(){
	var oC = document.getElementById('c1');
	
	var oGC = oC.getContext('2d');  
	
	var num = 0;
	
	oGC.fillRect(0,0,100,100);
	
	setInterval(function(){
		
		num++;
		
		oGC.clearRect(0,0,oC.width,oC.height);
		
		oGC.fillRect(num,num,100,100);
		
	},30);
	
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
	<span>不支援canvas瀏覽器</span>
</canvas> <!--預設：寬300 高150-->
</body>
</html>

3.Canvas開發注意事項 canvas畫布寬高定義

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
body{ background:black;}
#c1{ background:white; width:600px; height:300px;}
span{ color:white;}
</style>
<script>

window.onload = function(){
	var oC = document.getElementById('c1');
	
	var oGC = oC.getContext('2d');  
	
	var num = 0;
	
	oGC.fillRect(0,0,100,100);
	
	
};

</script>
</head>

<body>
<canvas id="c1">
	<span>不支援canvas瀏覽器</span>
</canvas> <!--預設：寬300 高150-->
</body>
</html>

此定義方式為按（預設大小）比例向量放大縮小，如果要定義寬高應如下定義

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
body{ background:black;}
#c1{ background:white; }
span{ color:white;}
</style>
<script>

window.onload = function(){
	var oC = document.getElementById('c1');
	
	var oGC = oC.getContext('2d');  
	
	var num = 0;
	
	oGC.fillRect(0,0,100,100);
	
	
};

</script>
</head>

<body>
<canvas id="c1" width:600px; height:300px;>
	<span>不支援canvas瀏覽器</span>
</canvas> <!--預設：寬300 高150-->
</body>
</html>

Html5 Canvas開發之滑鼠繪圖和方塊移動

1.滑鼠繪圖 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

canvas製作滑鼠繪圖和方塊移動小案例

在這裡插入圖片描述 canvas製作滑鼠繪圖：原理：獲取開始點選的點和滑鼠移動後的點所用知識：event物件 canvas繪圖 window.onload=function (){ var myCanvas=document.querySele

Html5 Canvas開發之插入圖片、設定背景、漸變、文字、陰影

1.插入圖片等圖片載入完，再執行canvas操作 -圖片預載入：在onload中呼叫 drawImage(olmg,x,y,w,h) -olmg:當前圖片x,y：座標w,h：寬高簡單例子： <!DOCTYPE h

HTML5 Canvas 開發繪圖方法整理【四、canvas曲線圖形 / 圓形】

其實在Canvas 中的基本圖形就只有兩個：直線圖形和曲線圖形。圓形也算是在曲線圖形中，一般畫圓的時候必須配套使用 beginPath() 和 closePath()，圓形屬於一個“閉合圖形”，先在畫布上開闢一個路徑，畫完以後結束路徑。語法

HTML5 Canvas 開發繪圖方法整理【二、canvas直線 & canvas矩形】

開始繪製圖形之前有一點需要說一下，Canvas 採用的座標系是W3C的座標系： X軸正方向向右; Y軸正方向向下; 所有的繪製方向都以這個為準。 Canvas 左上角的座標是 X :0 ; Y : 0

移動web開發之像素和DPR

javascript element 英語單詞計算機 web開發定義　　像素，又稱畫素，是圖像顯示的基本單位，譯自英文“pixel”，pix是英語單詞picture的常用簡寫，加上英語單詞“元素”element，就得到pixel，故“像素”表示“圖像元素”之意，有時亦被稱為pel(pi

HTML5+Canvas開發詳解（第2版）.pdf

繪圖 blog ipa img script 必備交互式 src 教程通過HTML5+Canvas開發詳解（第2版），你將學到如何使用Canvas進行繪圖、渲染文字、處理圖像、創建動畫，而這些是開發交互式Web遊戲的必備知識。本書針對Canvas和HTML5技

python全棧開發之匿名函式和遞迴函式

python全棧開發，匿名函式，遞迴函式匿名函式 lambda函式也叫匿名函式，即函式沒有具體的名稱。是為了解決一些功能很簡單需求而設計的一句話函式。如下： #這段程式碼defcalc(n):returnn**nprint(calc(10))#換成匿名函式calc =lambdan:n

javaWeb開發之攔截器和過濾器的區別

攔截器和過濾的關係圖攔截器和過濾器簡要區別 1、攔截器是基於java的反射機制的，而過濾器是基於函式回撥。2、攔截器不依賴與servlet容器，過濾器依賴與servlet容器。3、攔截器只能對action請求起作用，而過濾器則可以對幾乎所有的請求起作用。4、攔截器可以訪問action

iOS開發之給navigationbar和view設定同一張圖片

###### 效果一: 今天因為這個小東西被吐槽了...但還是決定記錄一下... 其實說是給navigationbar和view設定同一張圖片是不對的,應該是隱藏navigationbar,再去掉statusbar的背景色,新增view 最開始

JavaWeb 開發之 ServletContext 的和使用

一、什麼是ServletContext？ ServletContext是web應用的上下文物件，是一個域物件（能夠存取資料的物件） ServletContext在伺服器啟動時會自動幫你建好，一個應用只有一個ServletContext。建立的多個Servlet

微信小程式開發之get請和post請求的兩種用法

我們在開發微信小程式，需要進行資料請求，這裡只有get和post兩種.get請求，如下圖但是呢，在很多情況下光只有get請求是不行的，還必須要有post請求，那麼post請求怎麼寫呢，如下圖這

iOS開發之32位和64位系統

參考網址：http://blog.csdn.net/sakulafly/article/details/41089411 在蘋果推出iPhone5S時，64位的應用就走到了眼前。當時就看見蘋果官方資料宣佈iOS7.x的SDK支援了64位的應用，而且內建的應用都已經是64

java開發之提高java和mysql程式碼效能和質量

if巢狀的層數最好不要超過3層 /* * 巢狀太多層if,閱讀性非常差，和看遞迴程式碼一樣 * @author yifangyou * @since 2011-08-16 09:35:00 */ int exampl

Android開發之原生APP和Web APP的區別個人見解

Native App開發Native App開發即我們所稱的傳統APP開發模式（原生APP開發模式），該開發針對IOS、Android等不同的手機作業系統要採用不同的語言和框架進行開發，該模式通常是由

Android開發之簽名V1和V2的區別

在我們使用Android studio打包簽名的時候可以選擇兩種簽名方式。如下圖對於V2的官網解釋如下官網地址：https://android-developers.googleblog.

[Unity3D]Unity3D遊戲開發之滑鼠旋轉、縮放實現3D物品展示

各位朋友，大家好，我是秦元培，歡迎大家關注我的博主，我的部落格地址是blog.csdn.net/qinyuanpei。最近博主重點研究了攝像機旋轉、縮放等問題，那麼今天為大家分享的是一個在3D展示中比較常用的功能，即通過滑鼠右鍵實現旋轉、滑鼠滾輪實現縮放、滑鼠中鍵實現平移

移動web開發之畫素和DPR

前面的話　　畫素在web開發中幾乎天天用到，但到底什麼是畫素，移動端和桌面端的畫素有區別嗎，縮放對畫素有影響嗎，視網膜螢幕和畫素有什麼關係？關於這些問題，可能就不清楚了。本文將介紹關於畫素的相關知識定義　　畫素，又稱畫素，是影象顯示的基本單位，譯自英文“pixel”，pix是英語單詞pictu

GMap.Net開發之在WinForm和WPF中使用GMap.Net地圖外掛

GMap.NET是什麼？來看看它的官方說明：GMap.NET is great and Powerful, Free, cross platform, open source .NET control. Enable use routing, geocoding, directions and maps

HTML5 Canvas實戰之刮獎效果

近年來由於移動裝置對HTML5的較好支援，經常有活動用刮獎的效果，最近也在看H5方面的內容，就自己實現了一個，現分享出來跟大家交流。 1、效果 2、原理原理很簡單，就是在刮獎區新增兩個canvas，第一個canvas用於顯示刮開後顯示的內容，可以是一張圖片或一個字串，第二個canvas用於顯示塗層

Html5 Canvas開發之滑鼠繪圖和方塊移動

相關推薦