前军教程网

通过canvas绘制图形必须先指定图形的线条粗细与颜色,如果不指定,则默认以黑色进行绘制,现在看看如何指定图形样式

1 颜色

(1)以颜色名称表示

fillStyle = "red";

(2)以颜色代码(HEX码)表示

fillStyle = "#FF0000";

(3)以RGBA表示

rgba(red,green,blue,alpha)

red、green、blue可以使0-255的整数值,与一般8位颜色的十进制值相同,alpha可以是0.0-1.0的数值,0代表完全透明,1代表完全不透明,例如0.3表示

透明度30%。

表示蓝色透明度50%：rgba(0,0,255,0.5)

2 ColorPicker网页

网址为：
http://www.pagetutor.com/colorpicker/index.html

3 ColorPic软件工具

ColorPic是免费软件,网址为:
http://iconico.com/colorpic/

ColorPic软件不仅可以挑选色板上的颜色,还可以获取计算机屏幕上任意位置的颜色。

4 线条粗细

lineWidth属性用来指定线条宽度,单位是像素(pixel)。

context.lineWidth = "10";

lineCap属性用来指定线条的端点样式,属性值有butt、round和square。默认值是butt。

context.lineCap = "butt";

实例：

<script type="text/javascript">
function drawline(){
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle="#3300cc"; //设定边框颜色
//用循环画出10条直线
for (i = 0; i < 10; i++){
ctx.lineWidth = 1+i; //设定线条宽度
ctx.beginPath();
ctx.moveTo(20+i*15,20);
ctx.lineTo(20+i*15,170);
ctx.stroke();
}
ctx.lineWidth="20" //设定线条宽度
ctx.strokeStyle="#ff0066"; //设定边框颜色
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineCap="butt";
ctx.lineTo(350, 50);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(200, 100);
ctx.lineCap="round";
ctx.lineTo(350, 100);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(200, 150);
ctx.lineCap="square";
ctx.lineTo(350, 150);
ctx.stroke();
}
</script>