HTML5 Canvas学习---第六章 《用颜色和梯度填充对象》
首先我们认识一下主要的获取颜色方式
- context.fillStyle = 'red';
- context.fillStyle = "#ff0000";
- context.fillStyle = "rgb(r,g,b)";
- context.fillStyle = "rgba(r, g, b, a);
其中使用rgb(r,g,b)方法和rgba(r,g,b,a)方法的时候，必须使用引号括起来。
使用梯度来填充模型
线性梯度变化：主要有水平方向，垂直方向和对角线方向。这三个原理都一样，只要了解其中的一个剩下的俩，相应的做出变化就能形成。因代码比较简单，直接上例子。
水平梯度变化
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>chp2_draw_canvas</title>
<script type="text/javascript">
window.onload = function() {
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
//开始点和结束点，因为是水平梯度变化，y必须为零
//开始点为(0, 0)，结束点为(100,0);
var gr = context.createLinearGradient(0, 0, 100, 0);
//填充颜色变化0为开始，1为结束
//在这里开始的时候是红色，中间点为绿色，结束的时候又变回红色。
gr.addColorStop(0, "rgb(255,0,0)");
gr.addColorStop(0.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 style="background-color: white">
<canvas id="canvas" width="1000" height="600">
你的浏览器不支持HTML5画布
</canvas>
</body>
</html>
垂直梯度变化
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>chp2_draw_canvas</title>
<script type="text/javascript">
window.onload = function() {
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
//开始点和结束点，因为是垂直梯度变化，x必须为零
//开始点为(0, 0)，结束点为(100,0);
var gr = context.createLinearGradient(0, 0, 0, 100);
//填充颜色变化0为开始，1为结束
//在这里开始的时候是红色，中间点为绿色，结束的时候又变回红色。
gr.addColorStop(0, "rgb(255,0,0)");
gr.addColorStop(0.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.fill();
context.closePath();
};
</script>
</head>
<body style="background-color: white">
<canvas id="canvas" width="1000" height="600">
你的浏览器不支持HTML5画布
</canvas>
</body>
</html>
对角线梯度变化
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>chp2_draw_canvas</title>
<script type="text/javascript">
window.onload = function() {
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
//开始点和结束点，因为是垂直梯度变化，x必须为零
//开始点为(0, 0)，结束点为(100,0);
var gr = context.createLinearGradient(0, 0, 100, 100);
//填充颜色变化0为开始，1为结束
//在这里开始的时候是红色，中间点为绿色，结束的时候又变回红色。
gr.addColorStop(0, "rgb(255,0,0)");
gr.addColorStop(0.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.fill();
// context.closePath();
context.fillRect(0, 0, 100, 100);
};
</script>
</head>
<body style="background-color: white">
<canvas id="canvas" width="1000" height="600">
你的浏览器不支持HTML5画布
</canvas>
</body>
</html>
线性梯度变化总结：
- 获取gradient对象：var gr = context.createLinearGradient(0,0,x,x);
- 垂直梯度: var gr = context.createLinearGradient(0,0,0,100);
- 水平梯度: var gr = context.createLinearGradient(0,0,100,0);
- 对角线梯度：var gr = context.createLinearGradient(0,0,100,100);
- 设置颜色变化：gr.addColorStop(x, 'color');
- 使用gr设置填充风格：context.fillStyle = gr;
- 进行画图操作。
除了线性梯度变化还有放射形的梯度变化。跟线性梯度变化唯一的不同点是获取的gr对象不一样。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>chp2_draw_canvas</title>
<script type="text/javascript">
window.onload = function() {
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
//放射形梯度变化需要定义两个圆，显示放射形状。
//第一个圆中心为(100, 100)，半径为25
//第二个圆中心为(100, 100), 半径为100;
var gr = context.createRadialGradient(100, 100, 25,100,100,100);
//填充颜色变化0为开始，1为结束
//在这里开始的时候是红色，中间点为绿色，结束的时候又变回红色。
gr.addColorStop(0, "rgb(255,0,0)");
gr.addColorStop(0.5, "rgb(0,255,0)");
gr.addColorStop(1, "rgb(255,0,0)");
//用梯度变化值设置fillStyle样式。
context.fillStyle = gr;
context.fillRect(0, 0, 200, 200);
};
</script>
</head>
<body style="background-color: white">
<canvas id="canvas" width="1000" height="600">
你的浏览器不支持HTML5画布
</canvas>
</body>
</html>
使用模式来填充模型
我们可以通过createPattern()方法来初始化填充模式。它有两个参数，第一个参数为要使用的图片或其他canvas画布，第二个参数为显示方法，他有如下四种方式。
- repeat
- repeat-x
- repeat-y
- no-repeat
由字段可以看出它是表示重复的方式。我们直接上例子来了解。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>chp2_draw_canvas</title>
<script type="text/javascript">
window.onload = function() {
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
var theCanvas1 = document.getElementById("canvas1");
var context1 = theCanvas1.getContext("2d");
//先定义一个Canvas，该Canvas中心为(5,5)，半径5的实心圆
context1.fillStyle = "red";
context1.arc(5,5,5,0,Math.PI*2,false);
context1.fill();
//使用createPattern()方法创建模式，引用的图像为上面定义的canvas，显示方式为x,y轴重复显示。
var fillPattern = context.createPattern(theCanvas1, 'repeat');
context.fillStyle = fillPattern;
context.fillRect(0, 0, 200, 200);
};
</script>
</head>
<body style="background-color: white">
<canvas id="canvas" width="300" height="300">
你的浏览器不支持HTML5画布
</canvas>
<canvas id="canvas1" width="10" height="10">
你的浏览器不支持HTML5画布
</canvas>
</body>
</html>
创建图像阴影
创建阴影我们需要设置四个canvas属性
- shadowOffsetX：阴影的左右方位(负数为左，正数为右)
- shadowOffsetY：阴影的上下方位(负数为下，正数为上)
- shadowblur：阴影的范围
- shadowColor：阴影的颜色
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>chp2_draw_canvas</title>
<script type="text/javascript">
window.onload = function() {
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
context.fillStyle = "red";
context.shadowOffsetX = -4;
context.shadowOffsetY = 4;
context.shadowColor = "black";
context.shadowBlur = 10;
context.fillRect(10, 10, 200, 200);
};
</script>
</head>
<body style="background-color: white">
<canvas id="canvas" width="300" height="300">
你的浏览器不支持HTML5画布
</canvas>
<canvas id="canvas1" width="10" height="10">
你的浏览器不支持HTML5画布
</canvas>
</body>
</html>
