canva基本使用和绘制矩形

 1：canvas元素及基本定义与使用；

 <canvas id="test" width="400" height="400"></canvas>

   if(test.getContext) //判断是否有画笔

                          {

                                var cdx = test.getContext("2d");//代表2d绘图

                          }

 2：###canvas绘制矩形

        HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径

 

        1.绘制矩形

                 canvas提供了三种方法绘制矩形：

                         ---->绘制一个填充的矩形（填充色默认为黑色）

                                  fillRect(x, y, width, height)

                         ---->绘制一个矩形的边框（默认边框为:一像素实心黑色）

                                  strokeRect(x, y, width, height)

                         ---->清除指定矩形区域，让清除部分完全透明。     

                                  clearRect(x, y, width, height)

                                 

                 x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。

                 width和height设置矩形的尺寸。（存在边框的话，边框会在width上占据一个边框的宽度，height同理）

       

        2.strokeRect时，边框像素渲染问题

                 按理渲染出的边框应该是1px的，

                 canvas在渲染矩形边框时，边框宽度是平均分在偏移位置的两侧。

                         context.strokeRect(10,10,50,50)

                                  :边框会渲染在10.5 和 9.5之间,浏览器是不会让一个像素只用自己的一半的

                                    相当于边框会渲染在9到11之间

                         context.strokeRect(10.5,10.5,50,50)

                                  :边框会渲染在10到11之间

       

        3.添加样式和颜色

                 fillStyle   :设置图形的填充颜色。

                 strokeStyle :设置图形轮廓的颜色。

                         默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）

                 lineWidth : 这个属性设置当前绘线的粗细。属性值必须为正数。

                         描述线段宽度的数字。 0、 负数、 Infinity 和 NaN 会被忽略。

                         默认值是1.0。

                        

        4.lineWidth & 覆盖渲染

       

        5.lineJoin

                 设定线条与线条间接合处的样式（默认是 miter）

                 round : 圆角

                 bevel : 斜角

                 miter : 直角

      <script type="text/javascript">

//             

                 window.onload=function(){

                         //querySelector

                         //拿到画布

                         var canvas = document.querySelector("#test");

                         if(canvas.getContext){

                                  var ctx = canvas.getContext("2d");

                                  ctx.fillStyle="deeppink";

                                  ctx.strokeStyle="pink";

                                  ctx.lineWidth=25;

                                  ctx.lineJoin="round";

                                  //注意不加单位

                                  //填充的矩形

                                  //带边框的矩形 

                                  // 100      : 99.5 --- 100.5(99-101)

                                  // 100.5: 100  --- 101

                                  ctx.strokeRect(100,100,100,100)

                                  ctx.fillRect(0,0,100,100)

//                              ctx.clearRect(100,100,100,100)

                         }

                 }

        </script>

//画布的高宽问题：画布的高宽在元素中指定，不要用CSS指定，CSS指定会出现问题