1.canvas描述
canvas（畫布）是H5提出的新標簽，其目的是用于替代類似flash影片或游戲的插件，
能夠極大地減少頁面結構大小，提高頁面回應速度，
說明：
⑴ canvas標簽僅是一個圖形容器，提供了一個可以繪制影像、圖形的區域，可以實時渲染
圖形、影片、虛擬影像等，對快速繪圖進行了大量優化；
⑵ 使用<canvas>標簽習慣性在標簽內部設定元素大小，以及進行不支持說明；
示例：<canvas width:300px height:360px><p>瀏覽器不支持“canvas”！</p></canvas>
當然，也可以通過CSS設定尺寸屬性，還可以通過“if陳述句”判斷瀏覽器是否支持canvas，
⑶ canvas標簽除了提供繪圖區域外，沒有其他行為功能，其內部的所有內容都要通過腳本
（JavaScript）進行繪制完成；
⑷ 使用canvas的基礎模板：
<body>
<!--創建canvas畫布，并設定區域大小-->
<canvas id="myCanvas" width="200" height="300">
您的瀏覽器不支持Canvas！
</canvas>
<script>
// 獲取canvas畫布
var canvas=document.getElementById('myCanvas');
// 在畫布上創建畫筆
var ctx=canvas.getcontext('2d');
/* // 或通過if陳述句判斷瀏覽器是否支持canvas
if (canvas.getcontext){
var ctx=canvas.getcontext('2d');
}else {
canvas.innerText='瀏覽器不支持canvas！';
}*/
// 在畫布上繪制圖形
ctx.fillRect(10,10,60,60);
</script>
</body>
⑸ 絕大部分Canvas的繪圖API都沒有定義在<canvas>元素本身上，而是定義在通過畫布的
“getContext()”方法獲取的“繪圖背景關系環境”這個物件上；
⑹ canvas元素只支持一種原生的圖形繪制：矩形，其他所有圖形的繪制都至少需要生成一條路徑，
2.上屏即像素化
上屏即像素化是canvas的一個重要特征，是指區域內圖形一旦繪制完成，便不能更改，如尺寸、位置等，
只有通過清除內容再重新繪制的方式，實作改變繪制內容的效果，
下面以繪制矩形為例，
繪制矩形的相關方法：
⑴ fillRect( x ,y ,width, height)，繪制有填充的矩形；
⑵ strokeRect( x ,y ,width, height)，繪制無填充的矩形；
⑶ clearRect( x ,y ,width, height)，清除指定矩形內的像素；
⑷ rect( x, y, width, height) ，繪制矩形（定義矩形的路徑），需要配合stroke()方法完成繪制，
另外，設定填充繪畫的顏色，ctx.fillStyle='color';
代碼示例：
<body>
<!--創建canvas畫布，并設定區域大小-->
<canvas id="myCanvas" width="360" height="360">
您的瀏覽器不支持Canvas！
</canvas>
<script>
// 獲取canvas畫布
var canvas=document.getElementById('myCanvas');
// 在畫布上創建畫筆
var ctx=canvas.getContext('2d');
// 在畫布上繪制圖形
ctx.fillRect(50,50,60,60);
ctx.strokeRect(30,30,100,100);
ctx.clearRect(70,70,20,20);
ctx.rect(150,150,60,60);
ctx.stroke(); //繪制出rect()方法定義的路徑
// 通過反復清除、繪制，達到影像位移的效果，
var position=30;
var direction=1;
var timer=setInterval(function () {
if (position>=230){
direction=-1;
}else if (position<=10){
direction=1;
}
switch (direction) {
case -1:{
ctx.clearRect(position+19,position+19,102,102);
ctx.fillRect(position+20,position+20,60,60);
ctx.strokeRect(position,position,100,100);
ctx.clearRect(position+40,position+40,20,20);
position-=20;
}
break;
case 1:{
position+=20;
ctx.clearRect(position-21,position-21,102,102);
if (position<=130) {
ctx.fillRect(50,50,60,60);
ctx.strokeRect(30,30,100,100);
ctx.clearRect(70,70,20,20);
}
if (position>150&&position<=210) {
ctx.rect(150,150,60,60);
ctx.stroke();
}
ctx.fillRect(position+20,position+20,60,60);
ctx.strokeRect(position,position,100,100);
ctx.clearRect(position+40,position+40,20,20);
}
break;
}
},100);
</script>
</body>
3.路徑繪制
canvas中路徑是圖形的基本元素，路徑是不同顏色、寬度、長度的線段或曲線相連接形成的點線集合，
繪制路徑的一般步驟：
⑴ beginPath()，路徑繪制開始
⑵ moveTo(x,y)，設定筆觸(落點)的坐標位置
⑶ lineTo(x,y)，設定線段的終點坐標位置
⑷ strokeStyle='color'，設定筆觸繪畫的顏色，默認為黑色
⑸ stroke()，執行路徑繪制
⑹ fillStyle='color'，設定封閉路徑內部填充顏色，默認為黑色
⑺ fill()，執行顏色填充
當使用fill()方法時，沒有閉合的路徑會自動閉合，可以不使用closePath()函式，
但stroke()方法不會自動閉合路徑，
⑻ closePath()，路徑繪制結束
使用路徑開始和結束方法，可以確保各個路徑之間的獨立性，
代碼示例：
<body>
<canvas id="myCanvas" width="500" height="300">
<p>Sorry，您的瀏覽器不支持Canvas！</p>
</canvas>
<script>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
// 創建未閉合路徑，不進行填充
ctx.beginPath()
ctx.moveTo(70,80);
ctx.lineTo(70,150);
ctx.lineTo(120,150);
ctx.strokeStyle='yellowgreen';
ctx.stroke();
ctx.closePath();
// 創建未閉合路徑，進行顏色填充
ctx.beginPath()
ctx.moveTo(170,80);
ctx.lineTo(170,150);
ctx.lineTo(220,150);
ctx.lineTo(270,110);
ctx.fillStyle='yellowgreen';
ctx.fill();
ctx.closePath();
</script>
</body>
4.圓弧繪制
繪制圓弧或者圓形，使用“arc()”方法，
語法：ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
說明：arc()方法一共有6個引數，表示以(x,y)坐標為圓心、radius為半徑、從startAngle角度開始、
到endAngle角度結束，進行圓弧繪制，anticlockwise引數為布林值，false表示順時針繪制，
true表示逆時針繪制，
其中，arc()方法中的開始和結束角度單位是“弧度”，而不是度！
在JS中角度和弧度的換算運算式：radius=(Math.PI/180)*angleDegrees，也就相當于使用
“0~2”之間的任意數值乘以“Math.PI”得到相應的弧度，
另外，設定好圓弧路徑之后，可以使用“Stroke()”方法進行繪制，也可以使用“fill()”方法填充，
代碼示例：
<body>
<canvas height="300" width="500" id="canvasArc">
您的瀏覽器不支持Canvas！
</canvas>
<script>
var canvas = document.getElementById('canvasArc');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(200,150,60,0,0.8*Math.PI,true);
ctx.strokeStyle='blue';
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(200,150,60,0,0.8*Math.PI,false);
ctx.strokeStyle='red';
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(200,150,60,1.5*Math.PI,0.3*Math.PI,false);
ctx.fillStyle='lightgreen';
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(200,150,60,1.5*Math.PI,0.7*Math.PI,true);
ctx.fillStyle='orange';
ctx.fill();
ctx.closePath();
</script>
</body>
5.線型設定
⑴ 設定線條寬度
語法：ctx.lineWidth=value;
⑵ 設定線條端點
語法：ctx.linCap=style;
說明：
lineCap有三種樣式，butt（默認值）、round（圓形末端）、square（方形末端）
⑶ 設定線條連接處樣式
語法：ctx.lineJoin=style;
說明：
lineJoin有三種樣式，miter（默認值）、round（圓弧形）、bevel（切面形）
⑷ 設定線條虛線樣式
語法：ctx.setLineDash([segment1,segment2,segment3,...]);
說明：
setLineDash()方法的引數是一個陣列，陣列內的value依次表示虛線每一節的長度，
陣列內的值將在線條上回圈重復使用，
getLineDash()方法，用于獲取當前線條的虛線樣式，回傳值為陣列，
lineDashOffset()方法，用于設定當前線條第一節的偏移量，
⑸ 代碼示例：
<body>
<canvas id="canvasLineStyle" width="500" height="300"></canvas>
<script>
var canvas=document.getElementById('canvasLineStyle');
var ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(330,25);
ctx.lineTo(399,25);
ctx.lineTo(370,150);
ctx.lineWidth=8; //設定線條寬度
// ctx.lineCap='round'; //設定線條端點樣式
// ctx.lineJoin='bevel'; //設定線條連接處樣式
ctx.setLineDash([3,2,1]); //設定線條虛線樣式
ctx.lineDashOffset=2; //設定虛線起始位置偏移量
var lineStyle=ctx.getLineDash(); //獲取虛線樣式
console.log(lineStyle);
ctx.stroke();
ctx.closePath();
ctx.strokeStyle="#e20213";
for (var i=0;i<6; i++){
ctx.lineWidth=2+i*5; //設定線條寬度
ctx.beginPath();
ctx.moveTo(5+i*50, 25);
ctx.lineTo(5+i*50, 150);
ctx.stroke();
ctx.closePath();
}
</script>
</body>
6.Gradients漸變
⑴ 線性漸變
語法：ctx.createLinearGradient(x1,y1,x2,y2);
說明：該方法有4個引數，(x1,y1)表示漸變的起點，(x2,y2)表示漸變的終點，
該方法回傳一個Gradient物件，
⑵ 徑向漸變
語法：ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
說明：該方法有6個引數，(x,y,r)表示以(x,y)為圓心，以r為半徑的圓，創建漸變區域，
該方法回傳一個Gradient物件，
⑶ 顏色設定
語法：canvasGradient.addColorStop(position,color);
說明：該方法有2個引數，position的值為“0~1”之間的任意數，表示漸變顏色的相對位置，
引數color用于設定漸變色，可以是十六進制顏色值，也可以是rgba()顏色，
⑷ 漸變填充
創建Gradient物件，并設定漸變顏色，然后將Gradient物件賦予“fillStyle”，即可進行繪制填充，
代碼示例：
<body>
<canvas height="300" width="1000" id="canvasGradient"></canvas>
<script>
var canvas=document.getElementById('canvasGradient');
var ctx=canvas.getContext('2d');
// 創建線性漸變物件，
var linearGradient=ctx.createLinearGradient(50,50,100,100);
// 線性漸變物件顏色設定，
linearGradient.addColorStop(0,'red');
linearGradient.addColorStop(0.5,'yellow');
linearGradient.addColorStop(1,'yellowgreen');
// 線性漸變繪制，
ctx.beginPath();
ctx.fillStyle=linearGradient;
ctx.fillRect(10,10,150,150);
ctx.closePath();
// 創建徑向漸變,外圓包含內圓，
var radialGradient=ctx.createRadialGradient(300,80,10,270,80,80);
radialGradient.addColorStop(0,'red');
radialGradient.addColorStop(0.5,'yellow');
radialGradient.addColorStop(1,'yellowgreen');
ctx.beginPath();
ctx.fillStyle=radialGradient;
ctx.fillRect(200,10,150,150);
ctx.fill();
ctx.closePath();
// 創建徑向漸變，外圓不包含內圓，
var radialGradient=ctx.createRadialGradient(500,80,30,600,80,60);
radialGradient.addColorStop(0,'red');
radialGradient.addColorStop(0.5,'yellow');
radialGradient.addColorStop(1,'yellowgreen');
ctx.beginPath();
ctx.fillStyle=radialGradient;
ctx.fillRect(360,10,300,150);
ctx.fill();
ctx.closePath();
</script>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/270833.html
標籤：HTML5