前端H5筆記---五、javascript基礎+canvas畫布

如果有人問我你的夢是什麼，我會說：“買得起自己喜歡的東西，做自己喜歡的事，來場說走就走的旅行。帶着父母去再拍一次婚紗照、一次屬於他們的旅行。要是喜歡的人也喜歡自己，那就太完美了，如果不合適，那也不會因此的損失生活質量，反而會因爲花自己的錢，變得更加有底氣，這可能就是努力的原因吧。”

學習畫布之前要掌握javascript的基礎知識

●JavaScript的引入

●在HTML文檔中引入JavaScript文件與引入CSS文件的方法類似,分爲兩種方式:

●數據類型

● JavaScript中有5種基本數據類型。

●變量

● 在JavaScript中使用var進行局部變量的聲明。

var str="變量名";
var num=1.5;
age=23;
var str=new String;
var cars=new Array("A","B","C);//數組

JavaScript中，“new” 關鍵字用於聲明變量,所有的變量均爲對象，聲明瞭一個變量時,就創建了一個新的對象。

●函數

●函數( function )也可以叫做方法,是將- -些代碼組織在一起,形成一個用於完成某個具體功能的代碼塊,在需要時可以進行重複調用。

● 對象

●在JavaScript中,對象是擁有屬性和方法的數據。屬性是對象相關的值,方法是對象可以執行的動作。

●事件處理

● 採用事件驅動是JavaScript語言的一個最基本特徵,所謂的事件是指用戶在訪問頁面時執行的操作,常用的事件類型如右表所示。

●事件處理

●另外事件有很多屬性,常用的事件屬性如下表所示。

●JavaScript HTML DOM

●DOM的全稱爲文檔對象模型( Document Object Model )。當網頁被加載時,瀏覽器會將HTMLDOM模型被構造爲對象的樹。

●通過JavaScript來創建動態的HTML。主要表現在4個方面。

●要想操作HTML元素及其屬性,首先應該獲得這個元素.對象, document對象的常用獲取HTML元素對象的方法如下表所示。

●getBoundingClientRect()方法
一getBoundingClientRect()方法用於獲得頁面中某個元素的左,上,右和下分別相對瀏覽器視窗的位置, 或者說一個Element元素的座標現在已經是一個W3C標準。
— 該訪法返回一個Object對象,該對象有6個屬性: top、left、 right 、bottom、width、 height ,具體應用如下所示。

初識canvas

canvas意爲畫布,現實生活中的畫布是用來作畫的, HTML5中的canvas與之類似,我們可以稱它爲"網頁中的畫布”有了這個畫布便可以輕鬆的在網頁中繪製圖形、文字、圖片等。
●創建畫布

●HTML5中提供了標籤,使用標籤可以在網頁中創建一個矩形區域的畫布。

畫布本身不具有繪製功能,可以通過腳本語言( -般爲JavaScript )操作繪製圖形的API進行繪製操作。可以使用getElementByld()方法獲取畫布對象:

●準備畫筆

●有了畫布之後,要開始作畫需要準備- -只畫筆,這隻畫筆就是context對象,該對象可以使用JavaScript腳本獲得。

●座標和起點

●接下來需要設置上下文開始的繪製點,也就是“從哪裏開始畫”

●繪製線條

●lineTo()方法用於定義從"x,y" 的位置繪製- 條直線到起點或上一個線頭點。

●路徑

●繪製直線確定了起始點和線頭點後,便形成了-條繪製路徑,如果複雜路徑繪製必須使用路徑開始和結束。

●描邊和填充

●在canvas圖形繪製中 ,路徑只是草稿,真正繪製線必須執行stroke()方法根據路徑進行描邊,還可以使用fill()方法進行圖形的填充。

使用canvas繪製圖形的基本步驟：
a) 創建畫布：< canvas>< /canvas>
b) 準備畫筆（獲取上下文對象）：canvas.getContext(‘2d’);
c) 開始路徑規劃：context.beginPath();
d)移動起始點：context.moveTo(x, y);
e) 繪製線(矩形、圓形、圖片…) ：context.lineTo(x, y);
f) 閉合路徑：context.closePath();
g) 繪製描邊：context.stroke();

案例：網頁塗鴉板
效果：這畫工也太low了，大家將就看一下

思路

①該塗鴉板要在屏幕中間顯示,所以< canvas>標籤可以嵌套在< center>標籤中。
②編寫JavaScript代碼,首先要創建畫布、準備畫筆,並粗爲畫布設置寬高和邊框;然後將鼠標指針看成畫筆,當鼠標按下觸發onmousedown事件時,使用moveTo()方法確定起點,當鼠標移動觸發onmousemove事件時使用lineTo進行劃線。
③獲取鼠標的x , Y座標很簡單,可以使用clientX和clientY來獲取,當鼠標作用在一個對象上時,例如畫布,就要考慮這個對象在瀏覽器窗口的位置,這時便要使用getBoundingClientRect0方法來獲取canvas這個矩形對象,並且使用鼠標的座標減去這個矩形對象到瀏覽器左上角的距離。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CANVAS畫布</title>
</head>
<body>
	<center>
		<canvas id="cavsElem">
			您的瀏覽器不支持canvas，請升級瀏覽器
		</canvas>
	</center>
	
	<script type="text/javascript">
		// 當前立即執行function
		(function(){
			// 初始化畫布
			var canvas =document.getElementById('cavsElem');
			canvas.width= 900;
			canvas.height=600;
			canvas.style.border='1px solid #000';
			// 拿到畫布對象
			var context=canvas.getContext('2d');

			// 在鼠標按下的時候開始繪製線條
			canvas.onmousedown =function(e){

				// 繪製直線的開始位置
				// alert(e.clientX+""+e.clientY);
				
				// 需要知道畫布原點的座標
				var pos =canvas.getBoundingClientRect();
				// alert(pos.left+""+ pos.top);

				// 需要知道距離畫布原點的座標
				// alert((e.clientX-pos.left)+":"+(e.clientY-pos.top));

				context.beginPath();
				context.moveTo((e.clientX-pos.left),(e.clientY-pos.top));

				// 監聽鼠標移動的事件
				canvas.onmousemove= function(e){
					console.log((e.clientX-pos.left),(e.clientY-pos.top));

					// 不停地繪製線條
				context.lineTo((e.clientX-pos.left),(e.clientY-pos.top));
				// context.closePath();
				context.stroke();
				}
				canvas.onmouseup =function(){
					canvas.onmousemove =null;
				}
			}

		});

	</script>
</body>
</html>

canvas繪製矩形和清除矩形

canvas中分別使用strokeRect()和fillRect()方法來繪製矩形邊框和填充矩形。

context.strokeRect(x,y,width,height);
context.fillRect(x,y,width,height);

在canvas中還有一個相當於橡皮擦的方法,使用它可以清除矩形內繪製的內容。

context.clearRect(x, y,width,height);

canvas中使用arc()方法來繪製弧形和圓形。

context.arc( x, y, radius , startAngle , endAngle , bAntiClockwise);
x,y:中心點 radius：半徑長度 startAngle:開始弧度 endAngle :結束弧度 bAntiClockwise:是否逆時針（false：順時針、true：逆時針）

canvas繪製圖片

●canvas中的繪製圖片其實就是把一幅圖放在畫布上。

//繪製原圖
context.drawlmage(image, dx, dy))
//縮放繪圖
context.drawlmage(image, dx, dy, dWidth, dHeight )
//切片繪圖
context.drawlmage(image ,sx,Sy, sWidth,sHeigh ,dx,dy,dWidth,dHeight)
-----image：圖片來源 ----- dx,dy:目標中的座標 ----- dWidth，dHeight:目標的寬和高 -----sx,sy:Image在源中的起始座標 ----- sWidth,sHeight:源中圖片的寬和高

canvas其他方法

●canvas中提供的有關圖形繪製的方法還有很多,接下來介紹幾個本項目涉及到的方法,具體如下。

案例：發紅包才能看得照片

說明：當點擊想看我時：圓圈會隨機在畫布上選擇區域，你只可以看到一點點內容，當你點擊收到紅包就可以看到完整的照片，這種是營銷中常用的方法。

思路：

發紅包才能看得照片
①使用< a>標籤做兩個按鈕,併爲按鈕設置樣式。
②圖片模糊的效果使用CSS濾鏡"fiter: blur(px)”來實現,該屬性可以實現近視眼忘了戴眼鏡看東西的模糊效果
③各元素的定位都與< div>標籤相對定位,需要注意,兩個按鈕要顯示在最上層，Z-index值最大,可以設置爲999，其次是< canvas>標籤,最後是< img>標籤,圓形可顯示的部分是使用canvas繪製圓形來實現的。
2 HTML+CSS :
①繪製圓形: setRegion(Region) ,該方法中需要使用clip()方法剪切圓形區域,然後在圓形區域中繪製圖片,就是圖5-24中的圓形效果啦。
②繪製圖片: draw(image)方法中需要調用setRegion(Region)方法,並使用dlearRect()方法清除上- -次繪製的圓形,保證只顯示一個圓形區域。
③初始畫布: initCanvas()方法中調用draw(image)方法。
④“想看我麼” 按鈕單擊事件reset()方法,在該方法中調用initCanvas()方法,每次在不同的位置繪製圓形區域。
⑤“收到紅包” 按鈕單擊事件show()方法,在該方法中調用draw(image)方法,使圓形半徑大於畫布,這時就可以繪製完整的圖片了,也就是收到紅包的效果。

html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>發紅包</title>
	<link rel="stylesheet" type="text/css" href="css/photo.css"/>
</head>
<body>
	<div class="blurDiv">
		<img class="blurImg" src="pic.jpg" alt="#"/>
		<canvas id="mycanvas"></canvas>
		<a class="button" id="buttonreset" href="javascript:reset()">想看我</a>
		<a class="button" href="javascript:show()" id="buttonshow"> 收到紅包</a>
	</div>
	<script type="text/javascript" src="js/photo.js"></script>
</body>
</html>

css代碼：

.body{
	margin: 0;
	padding: 0;
}
.blurDiv{
	position: relative;
	width: 877px;
	height: 672px;
	margin:50px auto 0px;/*定義外邊距：頂部50px，左右水平居中，距離底部0px*/
}
.blurDiv .blurImg{
	width: 877px;
	height: 672px;
	display: block;/*把行元素強制轉換爲塊級元素*/
	filter: blur(20px);/*濾鏡，設置模糊度*/
	-webkit-filter:blur(20px);/*webkit保留filter*/
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}
.blurDiv #mycanvas{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
}

/*按鈕*/
.blurDiv .button{
	display: block;
	width: 240px;
	height: 60px;
	border-radius: 5px;
	line-height: 60px;
	text-align: center;
	position: absolute;
	top: 105%;
	font-family: arial;
	font-size: 1.5em;/*相當於24px*/
	color: #fff;
	text-decoration: none;/*清除字體樣式*/
	z-index:999;
}
.blurDiv #buttonreset{
	left: 7%;
	background-color: #c85814;
}
.blurDiv #buttonreset:hover{
	background-color: #ffb151;
}
.blurDiv #buttonshow{
	right:7%;
	background-color: #ff2f2e;
}
.blurDiv #buttonshow:hover{
	background-color: #ff596b;
}

js代碼:

var canvasWidth =877;//聲明畫布的寬度
var canvasHeight =672;

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

canvas.width=canvasWidth;
canvas.height=canvasHeight;

var image = new Image();
image.src='pic.jpg';
image.οnlοad=function(){
	initCanvas();/*注：*/
}
var radius=50;

function initCanvas(){
	Region = {
		x:Math.random()*(canvasWidth-2*radius)+radius,
		y:Math.random()*(canvasHeight-2*radius)+radius,
		r:radius
	};
	draw();
}

function setRegion(){
	context.beginPath();
	context.arc(Region.x,Region.y,Region.r,2*Math.PI,false);
	context.clip();
}

function draw(){
	context.clearRect(0,0,canvas.width,canvas.height);
	context.save();
	setRegion();
	context.drawImage(image,0,0);
	context.restore();
}

// 單擊事件reset方法，在該方法調用initCanvas()方法，每一次在不同的位置繪製圓形區域
function reset(){
	initCanvas();
}

function show(){
	Region.r=2*Math.max(canvas.width,canvas.height);
	draw();
}

前端H5筆記---五、javascript基礎+canvas畫布

初識canvas

canvas繪製矩形和清除矩形

canvas中使用arc()方法來繪製弧形和圓形。

canvas繪製圖片

canvas其他方法

公司新來一個幹練小夥，把 MyBatis 替換成 MyBatis-Plus，上線後哭暈在廁所。。。

10分鐘本地運行llama3及初體驗

Testin雲測上線華爲Pura 70系列真機測試服務！

手寫協議報文 c語言手法

推薦最舒適配色方案

[Windows下搭建WordPress測試環境]

建站模板推薦

h5學習筆記——四、表單的應用

html5學習筆記 —— 二、文本類網頁設計

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

linux以太網驅動總結