首先我们认识一下主要的获取颜色方式
- 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>