canvas学习绘制图片和添加图片等等一

canvas  默认的宽：300px  高：150px

canvas自己设置的宽高  是根据 300px和150px  的多少倍放大或缩小而定！！（不是在原有的基础上增加宽高）

绘制环境

   getContext('2d');    目前之处2d的场景

3d有兼容问题

例子：

var canvas=document.getElementById("canvas");

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

ctx.fillRect(50,50,100,100);

ctx.strokeRect()

<canvas id="canvas">

</canvas>

---

---

绘制方块：

（实心）    fillRect(L,T,W,H);默认颜色“黑色”     L是left（距离）     W是width 宽度

  （空心）  strokeRect(L,T,W,H);带边框的方块

注意：

var canvas=document.getElementById("canvas");

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

            ctx.fillStyle='aqua';

            ctx.lineWidth='5';

            ctx.lineCap='round(15)';

//            填充颜色要放在前面些、

            ctx.strokeRect(50.5,50.5,100,100);//空心是沿着边界向两边延伸宽度值，如果放在实心前面，往边框里延伸的边框就会被覆盖！！

            ctx.fillRect(50,50,100,100);//后画实心的话，会覆盖前面的空心，

设置绘图：

    fillStyle:填充颜色（绘制canvas是有顺序的）；要放在fillRect()的前面

    lineWidth:    边框宽度，是一个数值

    strokeStyle:    边框颜色

边界绘制

    lineJoin:    边界连接点样式    -miter（默认）、round(圆角)、bevel(斜角)

  

---

---

绘制路径（直线）：

     lineCap:    端点样式    -butt(默认)、round(圆角)、square（高度高出为宽一半的值）

    beginPath()：    开始绘制路径

canvas中的绘制方法（如stroke,fill），都会以“上一次beginPath”之后的所有路径为基础进行绘制。

    closePath()：    结束绘制路径

说到beginPath，就不得不提到closePath，两者是不是有很“紧”的联系呢？答案是几乎没有关系。

closePath的意思不是结束路径，而是关闭路径，它会试图从当前路径的终点连一条路径到起点，让整个路径闭合起来。但是，这并不意味着它之后的路径就是新路径了！

    moveTo()：移动到绘制的新目标点

    lineTo()：新的目标点

    stroke()：    画线，默认是黑色

    fill()： 填充，默认黑色

    rect()：    矩形区域

    clearRect()：删除一个画布的矩形区域

    save()：保存路径

    restore()：恢复路径

save() 和restore()相当于封装一样

注意：

        ctx.save();

            ctx.fillStyle="red";

            ctx.beginPath();

            ctx.moveTo(50,50);//坐标起点

            ctx.lineTo(100,100);

            ctx.lineTo(200,100);

            ctx.closePath();

            ctx.fill();

            ctx.restore();

//底下的就不会有红色，因为save将上面的封装起来

            ctx.beginPath();

            ctx.moveTo(50,100);//坐标起点

            ctx.lineTo(100,150);

            ctx.lineTo(200,150);

            ctx.closePath();

            ctx.fill();

---

---

绘制圆：

    arc（x,y,半径，起始弧度，结束弧度，旋转方向）

        -x , y     :骑士位置

        -弧度与角度的关系：弧度=角度*Math.PI/180;

        -旋转方向：顺时针（默认：false）、逆时针（true）

        

---

---

绘制其他曲线

    arcto(x1,y1,x2,y2,r)

                --第一组坐标、第二组坐标、半径

    quadraticCurveTo(dx,dy,x1,y1)

                --贝塞尔曲线：第一组控制点、第二组结束坐标

    bezierCurveTo(dx1,dy1,dx2.dy2,x1,y1)

                --贝塞尔曲线：第一组控制点、第二组控制点、第三组结束坐标

关于变换

    translate

            ---偏移：从起始点为基准的，移动当前坐标位置

    rotate：

              --选择：参数为弧度

    scale：

            --缩放----例子：ctx.scale(2,2);必须等比放大1:1

    

插入图片

        等图片加载完成，再执行canvas操作

            --图片预加载：在onload中 调用方法

        drawImage（oImg,x,y,w,h）   oImg：当前图片     x,y坐标    w,h：宽高

设置背景：

    createPattern（oImg，平铺方式）

                -2参为：repeat、repeat-x、repeat-y、no-repeat

渐变：

    createLineGradient（x1,y1,x2,y2）

            --线性渐变：（从上往下渐变颜色）

            --第一组参数：起始点坐标、    第二组参数：结束点坐标

            --addColorStop（位置，颜色）添加渐变点

    createRadialGradient（x1,y1,r1,x2,y2,r2）

            --放射性渐变：（从中间往外面辐射）

            --参数：第一个圆的坐标和半径，第二个圆的坐标和半径