1.fillStyle属性
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c = document.getElementById('myCanvas');//获取canvas标签
var ctx = c.getContext('2d');//获得context对象
ctx.fillStyle = "#0099CC";
ctx.fillRect(20,20,150,100);//(x,y,width,height)
</script>
</body>
fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
值 | 描述 |
---|---|
color | 指示绘图填充色的 CSS 颜色值。默认值是 #000000。 |
gradient | 用于填充绘图的渐变对象(线性或放射性) |
pattern | 用于填充绘图的 pattern 对象 |
*fillStyle填充线性渐变(从上到下)
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c = document.getElementById('myCanvas');//获取canvas标签
var ctx = c.getContext('2d');//获得context对象
var gra = ctx.createLinearGradient(0,0,0,170);
//createLinearGradient(渐变开始点的 x 坐标,渐变开始点的 y 坐标,渐变结束点的 x 坐标,渐变结束点的 y 坐标) 方法创建线性的渐变对象。
gra.addColorStop(0,"black");
gra.addColorStop(1,"white");
ctx.fillStyle = gra;
ctx.fillRect(20,20,150,100);//(x,y,width,height)
</script>
</body>
*fillStyle填充线性渐变(从左到右)
var gra = ctx.createLinearGradient(0,0,170,0);
*fillStyle填充放射性渐变
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c = document.getElementById('myCanvas');//获取canvas标签
var ctx = c.getContext('2d');//获得context对象
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
//createLinearGradient( 渐变的开始圆的 x 坐标, 渐变的开始圆的 y 坐标, 开始圆的半径,
//渐变的结束圆的 x 坐标,渐变的结束圆的 y 坐标, 结束圆的半径) 方法创建放射状/圆形渐变对象。
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);//(x,y,width,height)
</script>
</body>
2.strokeStyle
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c = document.getElementById('myCanvas');//获取canvas标签
var ctx = c.getContext('2d');//获得context对象
ctx.strokeStyle = '#0000ff';
ctx.strokeRect(20,20,150,100);
</script>
</body>
strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式(属性值和fillStyle的一致)
使用渐变笔触绘制矩形
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c = document.getElementById('myCanvas');//获取canvas标签
var ctx = c.getContext('2d');//获得context对象
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="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c = document.getElementById('myCanvas');//获取canvas标签
var ctx = c.getContext('2d');//获得context对象
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;
ctx.lineWidth = 5;
ctx.strokeText("hello world",10,50);
</script>
</body>
3.shadowColor & shadowBlur
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c = document.getElementById('myCanvas');//获取canvas标签
var ctx = c.getContext('2d');//获得context对象
ctx.shadowBlur = 20;
ctx.fillStyle = 'blue';
ctx.shadowColor = 'black';
ctx.shadowOffsetX = 10;
ctx.fillRect(20,20,100,80);
ctx.shadowColor = "red";
ctx.fillRect(140,20,100,80);
/*
* shadowColor 属性设置或返回用于阴影的颜色。
* shadowColor 属性与 shadowBlur 属性一起使用,来创建阴影
* shadowBlur 属性设置或返回阴影的模糊级数。
* 请通过使用 shadowOffsetX 和 shadowOffsetY 属性来调节阴影效果
* shadowOffsetX 属性设置或返回形状与阴影的水平距离。
shadowOffsetX=0 指示阴影位于形状的正下方。
shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。
shadowOffsetX=-20 指示阴影位于形状 left 位置左侧的 20 像素处。
*/
</script>
</body>