canvas绘制矩形及其样式设置

Canvas的坐标系

Canvas的坐标系跟其他绘图API的坐标系基本相同，都是左上为原点(0,0)，x轴沿着水平方向向右延伸，y轴沿垂直方向向下延伸;这一点在svg和gdi中也保持一致。后边要讲到变换，变换操作实际上是变换的坐标系，包括平移(translate)、旋转(rotate)、缩放(scale)等。

canvas坐标轴

画实心和描边矩形并设定相应的样式和颜色

我们从最简单的开始,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>

运行效果：

canvas样式设定

注意,设定上下文的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);