laravel 目錄結構
官網
laravel
thinkphp目錄結構
官網
thinkphp5
html 常用標簽
html 重要標簽
盒模型嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型嵌套</title>
<style>
.outer{
width: 640px;
height: 480px;
background: greenyellow;
margin: auto;
border: solid 10px black;
}
.inner{
width: 320px;
height: 240px;
background: red;
overflow: hidden;
text-align: center;
line-height: 200px;
border: solid 8px blue;
margin: 20% auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">中華人民共和國</div>
</div>
</body>
</html>
盒模型定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型定位</title>
<style>
div{
width: 640px;
height: 480px;
background: greenyellow;
position: fixed;/*設置該DIV為固定位置*/
left: 200px;/*left:距瀏覽器左邊200px*/
top: 100px;/*top:距瀏覽器頂部50px*/
}
</style>
</head>
<body>
<div>
固定定位
</div>
</body>
</html>
canvas
畫直線
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas 那些故事 </title>
</head>
<body>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
var canvas=document.getElementById('canvas')
var context=canvas.getContext('2d')
context.beginPath()
context.moveTo(100,150)
context.lineTo(450,50)
context.stroke()
</script>
</body>
</html>
畫矩形
canvas.js
function draw(id) {
/*
*1、獲取canvas元素
*
* 用getElementById方法獲取到canvas對象。
*
* */
var canvas=document.getElementById(id)
/*
* 2、取得上下文
* 在繪制圖形的時候要用到圖形上下文，
* 圖形上下文是一個封裝了很多繪圖功能的對象。
* 要使用canvas對象的getContext（）方法獲得圖形上下文。
在draw函數中把參數設置為“2d”。
*
* */
var context=canvas.getContext('2d')
/*
* 3、填充與會繪制邊框canvas繪制有兩種方法：
1）、填充（fill）
填充是將圖形內部填滿。
2）、繪制邊框（stroke）
繪制邊框是不把圖形內部填滿，只是會制圖形的外框。
*
*
* */
context.fillStyle="yellow"
/*
* 4、設置繪制樣式
* 當我們在繪制圖形的時候，
* 首先要設定好繪制的樣式，
* 然后我們就可以調用有關的方法進行繪制。
1）、fillStyle屬性
填充的樣式，在這個屬性里面設置填入的填充顏色值。
2）、strokeStyle屬性
圖形邊框的樣式，在這個屬性里面設置填入邊框的填充顏色。
*
*
* */
context.fillRect(0,0,400,300)
/*
*
* 5、指定畫筆寬度
* 通過對上下文對象（context）的lineWidth屬性來設置圖形邊框的寬度，
* 任何直線的寬度都是可以通過lineWidth來設置直線的寬度的。
*
* */
context.lineWidth=15
/*
* 6、設置顏色值
* 繪制圖形的時候要填充的顏色或者邊框分別可以通過fillstyle屬性和strokeStyle屬性來指定。
顏色的值可以使用
16進制的顏色值（#000000）
顏色名（black）
rgb（rgba（0，0，0））
rgba（rgba（0，0，0，0.1））
*
*
* */
context.strokeStyle="#f60"
/*
* 7、繪制矩形使用fillRect方法和strokeRect方法來填充矩形和繪制矩形的邊框。
context.filRect（x，y，width，height）
context.strokeRect（x，y，width，height）
這兩種方法的參數都是一樣的，
X是指矩形的起點橫坐標，y是指矩形的縱坐標，
坐標的原點是canvas畫布的最左上角，
width是指矩形的長度，height是指矩形的高度。
*
*
* */
context.strokeRect(50,50,180,120)
}
畫圓形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas 那些故事 </title>
<script type="text/javascript" src="js/canvas.js"></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="draw('canvas');">
<!--創建一個畫布-->
<canvas id="canvas" width="640" height="480"></canvas>
</body>
</html>
function draw(id) {
/*
*獲取canvas元素
*
* 用getElementById方法獲取到canvas對象。
*
* */
var canvas=document.getElementById(id)
/*
* 取得上下文
* 在繪制圖形的時候要用到圖形上下文，
* 圖形上下文是一個封裝了很多繪圖功能的對象。
* 要使用canvas對象的getContext（）方法獲得圖形上下文。
在draw函數中把參數設置為“2d”。
*
* */
var context=canvas.getContext('2d')
/*
* 填充與會繪制邊框canvas繪制有兩種方法：
1）、填充（fill）
填充是將圖形內部填滿。
2）、繪制邊框（stroke）
繪制邊框是不把圖形內部填滿，只是會制圖形的外框。
*
*
* */
context.fillStyle="#f1f2f3"
/*
* 設置繪制樣式
* 當我們在繪制圖形的時候，
* 首先要設定好繪制的樣式，
* 然后我們就可以調用有關的方法進行繪制。
1）、fillStyle屬性
填充的樣式，在這個屬性里面設置填入的填充顏色值。
2）、strokeStyle屬性
圖形邊框的樣式，在這個屬性里面設置填入邊框的填充顏色。
*
*
* */
context.fillRect(0,0,400,300) /*繪制背景*/
/*
* 1、開始創建路徑使用圖形上下文對象的beginpath方法。
context.beginPath();
*
* */
context.beginPath()
/*2、創建圖形路徑創建圓形路徑時，需要使用圖形上下文對象的arc方法。
context.arc（x，y，radius，starAngle，endAngle，anticlockwise）
x是繪制圓形的起點橫坐標，y是繪制圓形起點的縱坐標，
radius是圓形的半徑，starAngle是開始的角度，
endAngle是結束的角度，anticlockwise是否按順時針方向繪制。
繪制半徑與圓弧時指定參數為開始弧度與結束弧度，
如果你喜歡使用角度，可以使用以下這個方法，把角度換成弧度。
var radius=degrees*Math.PI/180
這個里面的Math.PI表示的角度是180度，
Math.PI*2的角度是360度。
* */
context.arc(50,50,20,0,Math.PI*2,true)
/*
* 3、創建完成關閉路徑
*
* 使用圖形上下文對象的closePath方法將路徑關閉。
context.closePath();
* */
context.closePath()
/*
* 4、設置繪制樣式然后調用繪制方法進行繪制
* context.fillStyle ='rgba（255，0，0，0.25）;
context.fill();
* */
context.fillStyle="rgba(255,0,0,0.25)"
context.fill()
}
畫多個圓圈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas 那些故事 </title>
<script type="text/javascript" src="js/canvas.js"></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="draw('canvas');">
<!--創建一個畫布-->
<canvas id="canvas" width="640" height="480"></canvas>
</body>
</html>
function draw(id) {
/*
*獲取canvas元素
*
* 用getElementById方法獲取到canvas對象。
*
* */
var canvas=document.getElementById(id)
/*
* 取得上下文
* 在繪制圖形的時候要用到圖形上下文，
* 圖形上下文是一個封裝了很多繪圖功能的對象。
* 要使用canvas對象的getContext（）方法獲得圖形上下文。
在draw函數中把參數設置為“2d”。
*
* */
var context=canvas.getContext('2d')
/*
* 填充與會繪制邊框canvas繪制有兩種方法：
1）、填充（fill）
填充是將圖形內部填滿。
2）、繪制邊框（stroke）
繪制邊框是不把圖形內部填滿，只是會制圖形的外框。
*
*
* */
context.fillStyle="#f1f2f3"
/*
* 設置繪制樣式
* 當我們在繪制圖形的時候，
* 首先要設定好繪制的樣式，
* 然后我們就可以調用有關的方法進行繪制。
1）、fillStyle屬性
填充的樣式，在這個屬性里面設置填入的填充顏色值。
2）、strokeStyle屬性
圖形邊框的樣式，在這個屬性里面設置填入邊框的填充顏色。
*
*
* */
context.fillRect(0,0,400,300) /*繪制背景*/
for (var i=0;i<10;i++) {
/*
* 1、開始創建路徑使用圖形上下文對象的beginpath方法。
context.beginPath();
*
* */
context.beginPath()
/*2、創建圖形路徑創建圓形路徑時，需要使用圖形上下文對象的arc方法。
context.arc（x，y，radius，starAngle，endAngle，anticlockwise）
x是繪制圓形的起點橫坐標，y是繪制圓形起點的縱坐標，
radius是圓形的半徑，starAngle是開始的角度，
endAngle是結束的角度，anticlockwise是否按順時針方向繪制。
繪制半徑與圓弧時指定參數為開始弧度與結束弧度，
如果你喜歡使用角度，可以使用以下這個方法，把角度換成弧度。
var radius=degrees*Math.PI/180
這個里面的Math.PI表示的角度是180度，
Math.PI*2的角度是360度。
* */
context.arc(i*25,i*25, i*10, 0, Math.PI * 2, true)
/*
* 3、創建完成關閉路徑
*
* 使用圖形上下文對象的closePath方法將路徑關閉。
context.closePath();
* */
context.closePath()
/*
* 4、設置繪制樣式然后調用繪制方法進行繪制
* context.fillStyle ='rgba（255，0，0，0.25）;
context.fill();
* */
//樣式一
context.fillStyle = "rgba(255,0,0,0.25)"
context.fill()
//樣式二
context.strokeStyle="blue"
context.stroke()
}
}
canvas保存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas保存 </title>
<script type="text/javascript" src="js/canvas.js"></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="draw('canvas');">
<!--創建一個畫布-->
<canvas id="canvas" width="1960" height="1280"></canvas>
</body>
</html>
function draw(id) {
/*
* 保存文件很多時候繪制完成的圖片需要保存，那么我們就可以使用到Canvas API來完成這最后一步！
*
*
Canvas API使用toDataURL方法把繪畫的狀態輸出到一個data URL中然后重新裝載，然后我們就可以把重新裝載后的文件直接保存。
CanvasAPI保存文件的原理實際上就是把我們繪畫的狀態動態輸出到一個data URL地址所指向的數據中的過程。
什么是data URL？
daa URL實際上就是base64位編碼的URL，主要用於小型的，可以在網頁中直接嵌入，而不需要從外部嵌入數據，比如img元素里面的圖像文件。
data URL的格式“data:image/jpeg；base64，/9j/4..…”
toDataURL的使用方法canvas.toDataURL（type）；
這個方法使用一個參數type，表述輸出數據的MIME類型。
什么是MIME類型：
jpg image/jpeg
*
* */
/*
*1、獲取canvas元素
*
* 用getElementById方法獲取到canvas對象。
*
* */
var canvas=document.getElementById(id)
/*
* 2、取得上下文
* 在繪制圖形的時候要用到圖形上下文，
* 圖形上下文是一個封裝了很多繪圖功能的對象。
* 要使用canvas對象的getContext（）方法獲得圖形上下文。
在draw函數中把參數設置為“2d”。
*
* */
var context=canvas.getContext('2d')
/*
* 3、填充與會繪制邊框canvas繪制有兩種方法：
1）、填充（fill）
填充是將圖形內部填滿。
2）、繪制邊框（stroke）
繪制邊框是不把圖形內部填滿，只是會制圖形的外框。
*
*
* */
context.fillStyle="yellow"
/*
* 4、設置繪制樣式
* 當我們在繪制圖形的時候，
* 首先要設定好繪制的樣式，
* 然后我們就可以調用有關的方法進行繪制。
1）、fillStyle屬性
填充的樣式，在這個屬性里面設置填入的填充顏色值。
2）、strokeStyle屬性
圖形邊框的樣式，在這個屬性里面設置填入邊框的填充顏色。
*
*
* */
context.fillRect(0,0,640,480)
/* 文件保存操作核心代碼*/
window.location = canvas.toDataURL('image/png');
}
