context.fillStyle = 'red';
(1)以rgb()方法设置颜色:
context.fillStyle = rgb(255,0,0);
(2)以十六进制数字字符串设置填充色
context.fillStyle = "#ffffff";
(3)以rgba()方法设置填充色
context.fillStyle = rgba(255,0,0,1);
例子1:线性水平渐变
<!DOCTYPE HTML>
<html lang="cn">
<head>
<meta charset="utf-8">
<title>canvans</title>
<script src="modernizr-custom.js"></script>
<script type="text/javascript">
//检测window是否加载完毕最终的代码
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
//检测是否支持canvas
//使用modernizr.js
function canvasSupport() {
return Modernizr.canvas;
}
//
function canvasApp() {
if (!canvasSupport()) {
return;
} else {
var theCanvas = document.getElementById("canvas"); //创建画布实例
var context = theCanvas.getContext("2d"); //获得2D上下文
}
drawScreen();
function drawScreen() {
//水平渐变必须保持为0
var gr = context.createLinearGradient(0, 0, 100, 0);
//添加颜色渐变
gr.addColorStop(0, 'rgb(255,0,0)');
gr.addColorStop(.5, 'rgb(0,255,0)');
gr.addColorStop(1, 'rgb(255,0,0)');
//应用fillstyle生成渐变
context.fillStyle = gr;
context.fillRect(0, 0, 100, 100);
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400">
Your browser does not support the canvas element.
</canvas>
</body>
</html>
创建一个水平渐变,必须首先创建一个变量gr来指代一个新的渐变。设置方式如下:
var gr = context.createLinearGradient(0, 0, 100, 0);
例子2:多个渐变填充对象
function drawScreen() {
//水平渐变必须保持为0
var gr = context.createLinearGradient(0, 0, 100, 0);
//添加颜色渐变
gr.addColorStop(0, 'rgb(255,0,0)');
gr.addColorStop(.5, 'rgb(0,255,0)');
gr.addColorStop(1, 'rgb(255,0,0)');
//应用fillstyle生成渐变
context.fillStyle = gr;
context.fillRect(0, 0, 100, 100);
context.fillRect(0, 100, 50, 100);
context.fillRect(0, 200, 200, 100);
}
例子3:水平描边渐变
function drawScreen() {
//水平渐变必须保持为0
var gr = context.createLinearGradient(0, 0, 100, 0);
//添加颜色渐变
gr.addColorStop(0, 'rgb(255,0,0)');
gr.addColorStop(.5, 'rgb(0,255,0)');
gr.addColorStop(1, 'rgb(255,0,0)');
//应用fillstyle生成渐变
context.fillStyle = gr;
context.strokeRect(0, 0, 100, 100);
context.strokeRect(0, 100, 50, 100);
context.strokeRect(0, 200, 200, 100);
}
例子4:复杂水平渐变
function drawScreen() {
//水平渐变必须保持为0
var gr = context.createLinearGradient(0, 0, 100, 0);
//添加颜色渐变
gr.addColorStop(0, 'rgb(255,0,0)');
gr.addColorStop(.5, 'rgb(0,255,0)');
gr.addColorStop(1, 'rgb(255,0,0)');
//应用fillstyle生成渐变
context.fillStyle = gr;
context.beginPath();
context.moveTo(0, 0);
context.lineTo(50, 0);
context.lineTo(100, 50);
context.lineTo(50, 100);
context.lineTo(0, 100);
//水平渐变应用到复杂形状
context.lineTo(0, 0);
context.stroke();
context.fill();
context.closePath();
}
垂直渐变如下:
var gr = context.createLinearGradient(0, 0, 0, 100);
对角线渐变如下:
var gr = context.createLinearGradient(0, 0, 100, 100);
简单径向渐变如下:
var gr = context.createLinearGradient(50, 50, 25, 50, 50, 100);
复杂径向渐变如下:
var gr = context.createLinearGradient(50, 50, 25, 100, 100, 100);