HTML5遊戲開發(三)
一、繪製
（一）矩形繪製
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>矩形繪製</title>
<style>
body {
background: #FFCC99;
}
#canvas {
background: #99CC99;
border: thin solid #FFFFCC;
}
</style>
</head>
<body>
<canvas id='canvas' width='600' height='400'>
</canvas>
<script src="js/rect.js"></script>
</body>
</html>js腳本：
var canvas = document.querySelector("#canvas"),
context = canvas.getContext('2d');
//定義字體與大小
context.font="24px 隸書";
//文本內容
context.fillText("內容擦除",200,40);
//路徑粗細
context.lineWidth=10;
//路徑樣式miter(方) bevel(斜角) round(圓角)
context.lineJoin="round";
//繪製一個矩形
context.strokeRect(75,100,200,200);
//實心矩形
context.fillRect(90,150,50,50);
context.canvas.onmousedown=function(e){
//清除畫布
context.clearRect(0,0,canvas.width,canvas.height);
}
(二)顏色與透明度
var canvas = document.querySelector("#canvas"),
context = canvas.getContext('2d');
//定義字體與大小
context.font="24px 隸書";
//文本內容
context.fillText("內容擦除",200,40);
//路徑粗細
context.lineWidth=10;
//路徑樣式miter(方) bevel(斜角) round(圓角)
context.lineJoin="round";
//設置路徑顏色
context.strokeStyle="#49868C";
//繪製一個矩形
context.strokeRect(75,100,200,200);
//設置填充顏色,R G B加透明色
context.fillStyle='rgba(168,21,43,0.1)';
//也可使用globalAlpha，設置透明度
//context.fillStyle='rgba(168,21,43)';
//context.globalAlpha=0.5;
//實心矩形
context.fillRect(90,150,50,50);
context.canvas.onmousedown=function(e){
//清除畫布
context.clearRect(0,0,canvas.width,canvas.height);
}
顯示效果：
(三)漸變色與圖案
1、線性漸變
context.createLinearGradient(x0,y0,x1,y1);
| 參數 | 描述 |
|---|---|
| x0 | 漸變開始點的 x 座標 |
| y0 | 漸變開始點的 y 座標 |
| x1 | 漸變結束點的 x 座標 |
| y1 | 漸變結束點的 y 座標 |
var canvas = document.querySelector("#canvas"),
context = canvas.getContext('2d');
//定義字體與大小
context.font="24px 隸書";
//文本內容
context.fillText("線性漸變",230,40);
//創建線性漸變 x,y開始位置，後兩個參數爲結束位置
//從左上角開始漸變
// gradient = context.createLinearGradient(
// 0, 0,canvas.width, canvas.height);
//從左側漸變
gradient = context.createLinearGradient(
0, canvas.height,canvas.width, canvas.height);
//設置漸變顏色 0~1之間的顏色停止點,表示漸變中開始與結束之間的位置
//在 0.0 到 1.0 之間的浮點值，表示漸變的開始點和結束點之間的一部分。
//offset 爲 0 對應開始點，offset 爲 1 對應結束點。
gradient.addColorStop(0,'red');
gradient.addColorStop(0.3,'green');
gradient.addColorStop(0.5,'blue');
gradient.addColorStop(0.4,'yellow');
gradient.addColorStop(0.2,'black');
//設置樣式
context.fillStyle=gradient;
//繪製實心矩形
context.fillRect(20,120,300,200);
context.canvas.onmousedown=function(e){
//清除畫布
context.clearRect(0,0,canvas.width,canvas.height);
}顯示效果：
2、放射漸變
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
| 參數 | 描述 |
|---|---|
| x0 | 漸變的開始圓的 x 座標 |
| y0 | 漸變的開始圓的 y 座標 |
| r0 | 開始圓的半徑 |
| x1 | 漸變的結束圓的 x 座標 |
| y1 | 漸變的結束圓的 y 座標 |
| r1 | 結束圓的半徑 |
var canvas = document.querySelector("#canvas"),
context = canvas.getContext('2d');
//定義字體與大小
context.font="24px 隸書";
//文本內容
context.fillText("放射漸變",230,40);
//創建放射漸變
gradient = context.createRadialGradient(
canvas.width/2, canvas.height,10,
canvas.width/2, 0, 100);
//設置漸變顏色 0~1之間的顏色停止點,表示漸變中開始與結束之間的位置
//在 0.0 到 1.0 之間的浮點值，表示漸變的開始點和結束點之間的一部分。
//offset 爲 0 對應開始點，offset 爲 1 對應結束點。
gradient.addColorStop(0,'red');
gradient.addColorStop(0.3,'green');
gradient.addColorStop(0.5,'blue');
gradient.addColorStop(0.4,'yellow');
gradient.addColorStop(0.2,'black');
//設置樣式
context.fillStyle=gradient;
//繪製實心矩形
context.fillRect(0,100,canvas.width,canvas.height-100);
context.canvas.onmousedown=function(e){
//清除畫布
context.clearRect(0,0,canvas.width,canvas.height);
}
顯示效果：
3、圖案
除了顏色與漸變色，Canvas元素也允許使用圖案來對圖形和文本進行描邊與填充。可以是以下三種之一：image元素、canvas元素和video元素。
可使用：
context.createPattern(image,”repeat|repeat-x|repeat-y|no-repeat”);
| 參數 | 描述 |
|---|---|
| image | 規定要使用的圖片、畫布或視頻元素。 |
| repeat | 默認。該模式在水平和垂直方向重複。 |
| repeat-x | 該模式只在水平方向重複。 |
| repeat-y | 該模式只在垂直方向重複。 |
| no-repeat 該模式只顯示一次（不重複）。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖案</title>
</head>
<body>
<style>
#canvas {
background: #eeeeee;
border: thin solid cornflowerblue;
}
#radios {
padding: 10px;
}
</style>
</head>
<body>
<div id='radios'>
<input type='radio' id='repeatRadio' name='patternRadio' checked/>重複
<input type='radio' id='repeatXRadio' name='patternRadio'/>橫向重複
<input type='radio' id='repeatYRadio' name='patternRadio'/>縱向重複
<input type='radio' id='noRepeatRadio' name='patternRadio'/>不重複
</div>
<canvas id="canvas" width="450" height="275">
</canvas>
<script type="text/javascript" src="js/pattern.js" ></script>
</body>
</html>
JS腳本：
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
repeatRadio = document.getElementById('repeatRadio'),
noRepeatRadio = document.getElementById('noRepeatRadio'),
repeatXRadio = document.getElementById('repeatXRadio'),
repeatYRadio = document.getElementById('repeatYRadio'),
image = new Image();
image.src="img/yin_yang_64px_1168759.png";
//圖像加載事件
image.onload=function(){
fillCanvasWithPattern("repeat");
}
//繪製圖案
function fillCanvasWithPattern(repeatString) {
//創建圖案對象
var pattern = context.createPattern(image, repeatString);
//清除背景
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = pattern;
//進行繪製一個實心矩形
context.fillRect(0, 0, canvas.width, canvas.height);
context.fill();
};
/**
* 事件添加
* @param {Object} e
*/
repeatRadio.onclick = function (e) {
fillCanvasWithPattern('repeat');
};
repeatXRadio.onclick = function (e) {
fillCanvasWithPattern('repeat-x');
};
repeatYRadio.onclick = function (e) {
fillCanvasWithPattern('repeat-y');
};
noRepeatRadio.onclick = function (e) {
fillCanvasWithPattern('no-repeat');
};顯示效果：
(四)陰影
通過以下屬性可以設置陰影：
| 參數 | 描述 |
|---|---|
| shadowColor | 設置或返回用於陰影的顏色 |
| shadowBlur | 設置或返回用於陰影的模糊級別 |
| shadowOffsetX | 設置或返回陰影距形狀的水平距離 |
| shadowOffsetY | 設置或返回陰影距形狀的垂直距離 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>陰影繪製</title>
<style>
body {
background: #FFCC99;
}
#canvas {
background: #99CC99;
border: thin solid #FFFFCC;
}
</style>
</head>
<body>
<canvas id='canvas' width='600' height='400'>
</canvas>
<script src="js/shadow.js"></script>
</body>
</html>JS腳本
var canvas = document.querySelector("#canvas"),
context = canvas.getContext("2d");
//設置陰影顏色
context.shadowColor="#2B334A";
//設置陰影的模糊級別
context.shadowBlur=20;
context.shadowOffsetX=10;
context.shadowOffsetY=10;
context.fillStyle="#6495ED";
context.fillRect(100,100,100,100);顯示效果：
(五)路徑、描邊與填充
| 方法 | 描述 |
|---|---|
| fill() | 填充當前繪圖（路徑） |
| stroke() | 繪製已定義的路徑 |
| beginPath() | 起始一條路徑，或重置當前路徑 |
| moveTo() | 把路徑移動到畫布中的指定點，不創建線條 |
| closePath() | 創建從當前點回到起始點的路徑 |
| lineTo() | 添加一個新點，然後在畫布中創建從該點到最後指定點的線條 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>路徑</title>
<style>
body {
background: #283c3c;
}
#canvas {
background: #282828;
border: thin solid #FFFFCC;
}
</style>
</head>
<body>
<canvas id='canvas' width='600' height='500'>
</canvas>
<script src="js/path.js"></script>
</body>
</html>JS腳本
var context=document.querySelector("#canvas").getContext("2d");
//路徑顏色
context.strokeStyle="#6495ED";
context.fillStyle="#49868C";
context.lineWidth = '5';
//路徑
context.beginPath();
context.rect(50, 50, 150, 80);
context.stroke();
context.beginPath();
context.rect(220, 50, 150, 80);
//填充
context.fill();
context.beginPath();
context.rect(400, 50, 150, 80);
//描邊
context.stroke();
context.fill();
//繪製圓弧,默認爲逆時針
context.beginPath();
context.arc(100, 250, 60, 0, Math.PI*3/2,false);
context.stroke();
//順時針繪製
context.beginPath();
context.arc(250, 250, 60, 0, Math.PI*3/2,true);
context.fill();
context.beginPath();
context.arc(400, 250, 60, 0, Math.PI*3/2);
context.stroke();
context.fill();
//繪製一個三角形
context.beginPath();
//起始點
context.moveTo(60,360);
context.lineTo(60,450);
context.lineTo(100,380);
context.lineTo(60,360);
//繪製路徑
context.stroke();
context.closePath();
//繪製一個多邊形
context.beginPath();
//起始點
context.moveTo(160,360);
context.lineTo(160,450);
context.lineTo(260,380);
context.lineTo(220,300);
context.lineTo(160,360);
//繪製路徑
context.stroke();
context.closePath();
顯示效果：
