先了解一下什麼是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。
畫布是一個矩形區域，您可以控制其每一像素。
canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
創建 Canvas 元素
規定元素的 id、寬度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
通過 JavaScript 來繪製
canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript 使用 id 來尋找 canvas 元素：
var c=document.getElementById("myCanvas");
然後，創建 context 對象：
var cxt=c.getContext("2d");
getContext("2d") 對象是內建的
HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
下面的兩行代碼繪製一個紅色的矩形：
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。
言歸正傳，進入漸變圖形繪製。
一、定義<canvas>樣式
<style>
body {
background: #000;
}
canvas {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
二、爲網頁<body></body>添加<canvas></canvas>元素
<canvas height="600" width="600"></canvas>
三、加入JS代碼，實現繪製功能。
<script>
var canvas = document.getElementsByTagName('canvas')[0],//獲取Canvas元素
ctx = null,
grad = null,
body = document.getElementsByTagName('body')[0],
color = 255;
if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d'); // 內建 HTML5對象getContext("2d")，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
ctx.clearRect(0, 0, 600, 600);//清除<canvas>所有內容
ctx.save();
// Create radial gradient
grad = ctx.createRadialGradient(0,0,0,0,0,600);//創建一條放射顏色漸變 grad.addColorStop(0, '#000');
grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');//在漸變中的某一點添加一個顏色變化
// assign gradients to fill
ctx.fillStyle = grad;
// draw 600x600 fill
ctx.fillRect(0,0,600,600);//fillRect 方法規定了形狀、位置和尺寸。
ctx.save();
body. = function (event) {
var width = window.innerWidth,
height = window.innerHeight,
x = event.clientX,
y = event.clientY,
rx = 600 * x / width,
ry = 600 * y / height;
var xc = ~~(256 * x / width);
var yc = ~~(256 * y / height);
grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
grad.addColorStop(0, '#000');
grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
// ctx.restore();
ctx.fillStyle = grad;
ctx.fillRect(0,0,600,600);
// ctx.save();
};
}
</script>
