HTML5绘图笔记3：设置图形样式

设置线形

例子

<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');
for (var i = 0; i < 12; i++){
 ctx.strokeStyle="red";
 ctx.lineWidth = 1+i;
 ctx.beginPath();
 ctx.moveTo(5,5+i*14);
 ctx.lineTo(140,5+i*14);
 ctx.stroke();
}
</script>

例子

<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');
var lineCap = ['butt','round','square'];
// 绘制参考线。
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(10,150);
ctx.moveTo(150,10);
ctx.lineTo(150,150);
ctx.stroke();
// 绘制直线段。
ctx.strokeStyle = 'blue';
for (var i=0;i<lineCap.length;i++){
 ctx.lineWidth = 20;  
 ctx.lineCap = lineCap[i];
 ctx.beginPath();
 ctx.moveTo(10,30+i*50);
 ctx.lineTo(150,30+i*50); 
 ctx.stroke();
}
</script>

例子

<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');
var lineJoin = ['round','bevel','miter'];
ctx.strokeStyle = 'blue';
for (var i=0;i<lineJoin.length;i++){
 ctx.lineWidth = 25;  
 ctx.lineJoin = lineJoin[i];
 ctx.beginPath();
 ctx.moveTo(10+i*150,30);
 ctx.lineTo(100+i*150,30); 
 ctx.lineTo(100+i*150,100); 
 ctx.stroke();
}
</script>

例子

<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');
for (var i=1;i<10;i++){   
 ctx.strokeStyle = 'blue';
 ctx.lineWidth = 10;
 ctx.lineJoin = 'miter';
 ctx.miterLimit = i*10;
 ctx.beginPath();
 ctx.moveTo(10,i*30);
 ctx.lineTo(100,i*30);
 ctx.lineTo(10,33*i);
 ctx.stroke();
}
</script>

绘制线性渐变

绘制线性渐变，需要使用到LinearGradient对象。使用绘图上下文对象的createLinearGradient()方法可以创建该对象.

ctx.createLinearGradient(xStart,yStart,xEnd,yEnd);

例子

<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');
var lingrad = ctx.createLinearGradient(0,0,0,200);
lingrad.addColorStop(0, '#ff0000');
lingrad.addColorStop(1/7, '#ff9900');
lingrad.addColorStop(2/7, '#ffff00');
lingrad.addColorStop(3/7, '#00ff00');
lingrad.addColorStop(4/7, '#00ffff');
lingrad.addColorStop(5/7, '#0000ff');
lingrad.addColorStop(6/7, '#ff00ff');
lingrad.addColorStop(1, '#ff0000');
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad;
ctx.fillRect(10,10,200,200);
</script>

绘制径向渐变

使用绘图上下文对象的createRadialGradient()方法绘制径向渐变.

context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

addColorStop() 方法规定渐变对象中的颜色和位置。

gradient.addColorStop(stop,color);

• stop：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。

• color： 在 stop 位置显示的 CSS 颜色值。

例子

<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');
var radgrad = ctx.createRadialGradient(55,55,20,100,100,90);
radgrad.addColorStop(0,'#ffffff');
radgrad.addColorStop(0.75,'#333333');
radgrad.addColorStop(1,'#000000');
ctx.fillStyle = radgrad;
ctx.fillRect(10,10,200,200); 
</script>

例子

<script>
 var canvas=document.getElementById("myCanvas");
 var ctx=canvas.getContext('2d'); 
 var radil2=ctx.createRadialGradient(30,20,20,150,110,80);
 radil2.addColorStop(0.3,"blue");
 radil2.addColorStop(0.5,"yellow"); 
 ctx.fillStyle=radil2;
 ctx.fillRect(0,0,150,150);
</script>

绘制图案

<canvas id="myCanvas" width="600" height="400"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');  
// 创建用于图案的新image对象。
var img = new Image();
img.src = 'img/pp.png';
img.onload = function(){
 // 创建图案。  
 var ptrn = ctx.createPattern(img,'repeat');
 ctx.fillStyle = ptrn;
 ctx.fillRect(0,0,600,600);
}
</script>

设置不透明度

<canvas id="myCanvas" width="500" height="300"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext("2d");
ctx.translate(200,20);
for (var i=1;i<50;i++){
 ctx.save();
 ctx.transform(0.95,0,0,0.95,30,30);
 ctx.rotate(Math.PI/12);
 ctx.beginPath();
 ctx.fillStyle='rgba(255,0,0,'+(1-(i+10)/40)+')';
 ctx.arc(0,0,50,0,Math.PI*2,true);
 ctx.closePath();
 ctx.fill();
}
</script>

设置阴影

<canvas id="myCanvas" width="400" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');
// 设置阴影。
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2;  
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
// 绘制矩形。
ctx.fillStyle = "#33ccff";
ctx.fillRect(20,20,350,60);
ctx.fill();
// 绘制文本。
ctx.font = "45px 黑体";
ctx.fillStyle = "white";
ctx.fillText("HTML5基础知识",30, 64);
</script>