从零开始-Canvas
1、颜色、样式和阴影
属性
a、fillStyle(设置或返回用于填充绘画的颜色、渐变或模式)
语法：context.fillStyle = color(颜色值) | gradient(渐变对象，线性或者放射性) | pattern(填充绘图的pattern对象) ;
定义一个用蓝色填充的矩形
<body>
//定义一个画布 <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas> <script> //DOM获取到这块画布 var c=document.getElementById("myCanvas"); //然后，创建 context 对象 //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 var ctx=c.getContext("2d"); //填充画布的颜色 ctx.fillStyle="#0000ff"; //确定画布的位置和大小 //四个参数分别为： //画布在标签的初始x位置 //画布在标签的初始y位置 //画布的长度 /画布的宽度 ctx.fillRect(20,20,150,100); </script> </body>
结果显示：
定义从上到下的渐变，作为矩形的填充样式
<body>
<canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//创建线性渐变
//四个参数的含义：
//渐变开始的点的x坐标
//渐变开始的点的y坐标
//渐变结束的点的x坐标
//渐变结束的点的y坐标
//提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
//提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。
var my_gradient=ctx.createLinearGradient(0,0,0,170);
//方法规定 gradient 对象中的颜色和位置。
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
</script>
</body>
结果显示：
b、strokeStyle(设置或返回用于笔触的颜色、渐变或模式)
绘制一个蓝色线条的矩形
<body>
<canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);
</script>
</body>
结果显示：
绘制一个渐变笔触的矩形框
<body>
<canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
</script>
</body>
结果显示：
绘制一个渐变的字体
<body>
<canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// 创建渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
//给context添加字体
//strokeText有四个参数：
//第一个参数：文本
//第二个参数：开始绘制文本的x坐标(相对于画布)
//第三个参数：开始绘制文本的y坐标(相对于画布)
//第四个参数：可选，允许的最大文本宽度，以像素计。
ctx.strokeText("Big smile!",10,50);
</script>
</body>
结果显示：
c、shadowColor(设置或返回用于阴影的颜色)
绘制一个带有黑色阴影的蓝色矩形
<body>
<canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//设置用于阴影的模糊级别
ctx.shadowBlur=20;
//设置阴影颜色
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);
</script>
</body>
结果显示：
d、shadowBlur(设置或返回用于阴影的模糊级别)
具体可以看c、shadowColor(设置或返回用于阴影的颜色)
e、shadowOffsetX(设置或返回阴影距形状的水平距离)
绘制一个矩形，带有向右偏移20像素的阴影(从矩形的left位置比较)
<body>
<canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//阴影模糊级别
ctx.shadowBlur=10;
//阴影横向偏移量
ctx.shadowOffsetX=20;
//阴影颜色
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);
</script>
</body>
结果显示：
f、shadowOffsetY(设置或返回阴影距形状的垂直距离)
具体可以看e、shadowOffsetX(设置或返回阴影距形状的水平距离)
方法
a、createLinearGradient() 创建线性渐变
b、createPattern() 在指定的方向上重复指定的元素
语法：context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
在水平和竖直方向重复图像
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("lamp"); //重复图像 var pat=ctx.createPattern(img,"repeat");
//创建矩形 ctx.rect(0,0,150,100); ctx.fillStyle=pat; ctx.fill();
结果显示：
c、createRadialGradient() 创建放射状/环形的渐变
语法：context.createRadialGradient(x0,y0,r0,x1,y1,r1);
渐变开始圆x，y
渐变开始圆半径
渐变结束圆x，y
渐变结束圆半径
绘制一个矩形，并用放射状/圆形渐变进行填充
<body>
<canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//createLinearGradient() 方法创建放射状/圆形渐变对象。
//渐变可用于填充矩形、圆形、线条、文本等等。
//提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
//提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
</script>
</body>
结果显示：
d、addColorStop() 规定渐变对象中的颜色和停止位置
定义一个从黑到白的渐变，作为矩形的填充样式
var c=document.getElementById('myCanvas'); var ctx=c.getContext('2d'); var grd=ctx.createLinearGradient(0,0,170,0); grd.addColorStop(0,"black"); grd.addColorStop(1,"white"); ctx.fillStyle=grd; ctx.fillRect(20,20,150,100);
结果显示：
