Canvas的坐标系
Canvas的坐标系跟其他绘图API的坐标系基本相同,都是左上为原点(0,0),x轴沿着水平方向向右延伸,y轴沿垂直方向向下延伸;这一点在svg和gdi中也保持一致。后边要讲到变换,变换操作实际上是变换的坐标系,包括平移(translate)、旋转(rotate)、缩放(scale)等。
画实心和描边矩形并设定相应的样式和颜色
我们从最简单的开始,fillRect和strokeRect这两个函数一个用于画实心矩形,一个用于画描边矩形,描边矩形就是只画出矩形的轮廓;这2个函数不同于后期将要学到的其他的路径绘图函数,唯一的2个隐含路径的函数,不需要调用beginPath和closePath。
demo代码:
<!DOCTYPE html>
<html>
<head>
<title>canvas绘制矩形</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<canvas id="my_canvas" width="1200" height="1200" style="margin:0px auto;border:1px solid #ccc;display: block;">
</canvas>
</body>
<script type='text/javascript'>
$(function (){
var c=document.getElementById("my_canvas");
var ctx=c.getContext("2d");
//实心矩形默认颜色
ctx.fillRect(50,50,100,100);
ctx.fillStyle = "purple"; //颜色字符串
ctx.fillRect(250,50,100,100);
ctx.fillStyle = "#ff69b4"; //rgb 16进制值
ctx.fillRect(450,50,100,100);
ctx.fillStyle = "rgb(55,88,66)"; //rgb函数形式
ctx.fillRect(650,50,100,100);
ctx.fillStyle = "rgba(55,88,66,0.3)";//rgba函数形式
ctx.fillRect(850,50,100,100);
//描边矩形
ctx.strokeStyle="#0055ff";
ctx.lineWidth=2;
ctx.strokeRect(50,250,100,100);
});
</script>
</html>
运行效果:
注意,设定上下文的fillStyle或者strokeStyle之后,会影响之后的绘图,如果要恢复之前的绘图状态,需要重新设定相关属性值。
fillStyle和strokeStyle可以设定为三种值,一种是css字符串值,一种是渐变对象(gradient),还有一种是模式对象(pattern)。
目前我们说明css字符串,这也是我们最常用的一种设定填充样式和描边样式的方法。fillStyle和strokeStyle默认值是黑色(black),css字符串通常有4种设置形式,这些和你设置的css是一样的:
- 颜色字符串,如:green、blue、purple等。
- rgb 16进制值,如:#ff69b4。
- rgb函数形式,如:rgb(red,green,blue),里面的每个分量值范围为0-255。
- rgba函数形式,如:rgba(red,green,blue,alpha),跟rgb函数形式差别不大,只是加上了不透明度这个分量,取值0~1之间,0为完全透明,1为完全不透明。
注意观察第一行最后2个矩形,它们的颜色设定都是相同的,最后一个矩形alpha值缩小,形成减淡透明效果。context的lineWidth属性主要用设定描边的宽度,通过在chrome里面测试得知,当这个值<=1的时候,会被重置为1,其他浏览器暂未测试。
全局透明度globalAlpha
rgba可以用来设置不透明度,context的globalAlpha属性可以设置或返回绘图的当前透明值, 属性值必须是介于 0.0(完全透明) 与 1.0(不透明) 之间的数字。但是globalAlpha是作用于canvas的全局的,它不仅适用于填充和描边,还可以用于drawImage等。
当同时设定rgba和globalAlpha,最终的alpha值为二者的乘积,如下代码所示:
context.globalAlpha = 0.5;
context.fillStyle = "rgba(255,0,0,0.5)";//实际透明度 0.5*0.5=0.25
context.fillRect(20,20,200,100);