HTML5——Canvas畫布的使用方法
一、概述
作用——利用HTML5中提供的畫布功能，通過Canvas實現各種圖形。
注意：js事件不能繫結到畫布中的圖形上，只能為<canvas>元素繫結事件。
二、畫布的使用
1、html頁面中使用<canvas>定義畫布
2、使用js獲取canvas元素，並呼叫getContext("2d")方法得到畫布物件
3、使用畫布提供的API方法繪製圖形
4、繪製圖形的方法
繪製矩形：
fillRect（x,y,width,height）--繪製實心矩形
x和y--矩形左上角的座標值
width和height--矩形的寬與高
strokeRect(x,y,width,height)--繪製空心矩形
屬性含義同上
clearRect（x,y,width,height）--清除制定矩形區域
屬性含義同上
小案例：
<!DOCTYPE HTML>
<html>
<head>
<title>如何使用Canvas</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canv" style="background:red" width="400px" height="400px"></canvas>
</body>
<script>
var canvas=document.getElementById("canv");
var context=canvas.getContext("2d");
context.strokeRect(10,10,100,100);
context.fillRect(100,100,100,100);
context.clearRect(110,110,80,80);
</script>
<
繪製效果：
設定顏色：
fillStyle--設定填充顏色
strokeStyle--設定描邊顏色
globalAlpha--設定透明度(0-1)
小案例：設定彩色矩形
<!DOCTYPE html>
<html>
<head>
<title>設定顏色</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canvas" width="500px" height="500px" style="background:silver"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// 1 設定填充顏色
context.fillStyle = "blue";
// 2 繪製實心矩形
context.fillRect(10,10,100,100);
context.strokeStyle = "red";
context.strokeRect(120,10,100,100);
context.fillStyle = "red";
context.globalAlpha = 0.2;
context.fillRect(230,10,100,100);
</script>
</body>
</html>
繪製效果：
設定漸變
線性漸變：createLinearGradient(x1,y1,x2,y2)
x1,y1 - 基準線的起點座標值
x2,y2 - 基準線的終點座標值
線性漸變根據基準線實現漸變效果
扇形漸變：createRadialGradient(x1,y1,r1,x2,y2,r2);
x1和y1 - 第一個圓的圓心座標值
r1 - 第一個圓的半徑
x2和y2 - 第二個圓的圓心的座標值
r2 - 第二個圓的半徑
扇形漸變根據基準圓實現扇形漸變
設定漸變：addColorStop(position,color)
position - 設定顏色的位置(0-1)
color - 設定的顏色
注意：該方法由漸變物件呼叫，而不是畫布物件呼叫
線性漸變小案例：
<!DOCTYPE HTML>
<html>
<head>
<title>線性漸變</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas width="500px" height="500px" id="canvas"></canvas>
</body>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var grad=context.createLinearGradient(0,0,400,0);
//var grad=context.createLinearGradient(0,0,0,300);
//var grad=context.createLinearGradient(0,0,400,300);
grad.addColorStop(0,"blue");
grad.addColorStop(0.5,"green");
grad.addColorStop(1,"yellow");
context.fillStyle=grad;
context.fillRect(0,0,400,300);
</script>
</html>
三種執行效果分別為：
扇形漸變小案例：
<!DOCTYPE HTML>
<html>
<head>
<title>扇形漸變</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canvas" width="400px" height="300px"></canvas>
</body>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var grad=context.createRadialGradient(200,0,100,200,300,100);
//var grad=context.createRadialGradient(0,0,30,200,300,100);
grad.addColorStop(0,"orange");
grad.addColorStop(1,"yellow");
context.fillStyle=grad;
context.fillRect(0,0,400,300);
</script>
</html>
兩種執行效果分別為：
