Canvas绘图接口(直线)

规划矩形路径（需要自己进行填充和绘制）

/**
这里需要传入
x----起始的X坐标
y----起始的Y坐标
width----矩形的宽
height----矩形的高
*/
context.rect(x,y,width,height);
context.lineWidth = 10;
context.fillStyle = 'red';
context.fill();
context.stroke();

直接绘制矩形

这里与之前的rect()不同之处在于，rect()方法只是规划处矩形的路径，绘制还是需要自己调用stroke()方法进行绘制的，而下面的这两个方法则直接绘制出矩形

//使用当前的fillstyle绘制出一个填充的矩形
context.fillRect(x,y,width,height);
//使用当前的strokeStyle绘制出一个带边框的矩形
context.strokeRect(x,y,width,height)

设置线条两端形状

var canvas = document.getElementById('canvas');
        canvas.width = 1000;
        canvas.height = 800;
        //2d绘图
        var context = canvas.getContext('2d');
        context.lineWidth = 50;

        context.beginPath();
        context.moveTo(100,100);
        context.lineTo(700,100);
        context.lineCap = 'butt';/*butt正常显示*/
        context.stroke();

        context.beginPath();
        context.moveTo(100,200);
        context.lineTo(700,200);
        context.lineCap = 'round';/*round会在线条两端多出来两个半圆*/
        context.stroke();

        context.beginPath();
        context.moveTo(100,300);
        context.lineTo(700,300);
        context.lineCap = 'square';/*square会在线条两端多出两个四方块*/
        context.stroke();

线条相交时所呈现的形态

/*
lineJoin有3个值
bevel:使线与线相交的地方不是尖角，而是折叠效果
round:线条相接时使用圆形光滑过渡
miter:显示尖角

*/
context.lineJoin='bevel';
/**
miterLimit只有当lineJoin为miter时，该属性才有效,默认值是10
*/
context.miterLimit = 20;

画一个五角星

    var canvas = document.getElementById('canvas');
        canvas.width = 800;
        canvas.height = 800;

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

        context.lineWidth = 10;
        drawStar(context,400,400,300,150,0);
        /**
         * [drawStar description]
         * @param  {[type]} cxt    [绘图上下文]
         * @param  {[type]} x      [偏移量x]
         * @param  {[type]} y      [偏移量y]
         * @param  {[type]} outerR [大圆的半径]
         * @param  {[type]} innerR [小圆的半径]
         * @param  {[type]} rot    [五角星旋转的角度]
         * @return {[type]}        [description]
         */
            function drawStar(cxt,x,y,outerR,innerR,rot){
                cxt.beginPath();
                for(var i = 0; i < 5;i++){
                    cxt.lineTo(Math.cos((18 + i * 72)/180 * Math.PI) * outerR + x,

                                -Math.sin((18 + i * 72) / 180 * Math.PI) * outerR + y);
                    cxt.lineTo(Math.cos((54 + i * 72)/180 * Math.PI) * innerR + x,

                                -Math.sin((54 + i * 72) / 180 * Math.PI) * innerR + y);
                }
                cxt.closePath();
                cxt.stroke();
            }

绘制一片星空

context.fillStyle = '#000000';
        //直接绘制一个矩形，即代表星空
        context.fillRect(0,0,canvas.width,canvas.height);
        //绘制很多个不同的五角星
        for(var i = 0 ; i <200 ; i++){
            //得到不同大小的圆的半径
            var r = Math.random() * 10 + 10;//获取10~20之间的随机数
            var x = Math.random() * canvas.width;//获取随机的x偏移量,0~画布宽度之间的随机值
            var y = Math.random() * canvas.height;
            var rot = Math.random() * 360;//获取角度在0~360度之间的角度
            drawStar(context,x,y,r,r/2,rot);

        }

图形变换和状态保存

状态保存

save()和restore()方法

<script type="text/javascript">
        var canvas = document.getElementById('canvas');

        canvas.width = 800;
        canvas.height = 800;

        var context = canvas.getContext('2d');
        /**
         * translate会改变canvas的原点坐标，在使用translate移动到100,100时，继续使用fillRect在0,0点绘制时，回绘制在canvas的100,100的位置
         * 而在移动了坐标之后，后面再使用translate时，会在原来的基础上进行移动，即后面的translate(300,300)不是将canvas的原点移动到300,300的位置，而是移动在400,400的位置
         *
         * 加上save()和restore(),就会在每次一绘制之前先保存本次的绘制状态，绘制完成之后再使用restore进行恢复到原始状态
         * @type {String}
         */

        /**
         * 建议在绘制图形时，如果图形要进行变换或者动画，那么都需要先save()保存绘制状态，完成之后进行restore()恢复
         */
        context.save();
        context.fillStyle = 'red';
        context.translate(100,100);
        context.fillRect(0,0,400,400);
        context.restore();

        context.save();
        context.fillStyle = 'green';
        context.translate(300,300);
        context.fillRect(0,0,400,400);
        context.restore();
    </script>

图形变换

translate(),rotate(),scale()

<script type="text/javascript">
    /**
     * 图像变换：
     * 1：translate(x,y)
     * 2:rotate(deg)
     * 3:scale()---不仅进行大小的缩放，而且对图形的坐标，图形的边框宽度也会进行缩放，所以谨慎使用
     * @type {[type]}
     */
        var canvas = document.getElementById('canvas');

        canvas.width = 800;
        canvas.height = 800;

        var context = canvas.getContext('2d');
        context.fillStyle = '#000000';
        //直接绘制一个矩形，即代表星空
        context.fillRect(0,0,canvas.width,canvas.height);
        //绘制很多个不同的五角星
        for(var i = 0 ; i <200 ; i++){
            //得到不同大小的圆的半径
            var r = Math.random() * 10 + 10;//获取10~20之间的随机数
            var x = Math.random() * canvas.width;//获取随机的x偏移量,0~画布宽度之间的随机值
            var y = Math.random() * canvas.height;
            var rot = Math.random() * 360;//获取角度在0~360度之间的角度
            drawStar(context,x,y,r,rot);

        }
        /**
         * 绘制星空
         */
        function drawStar(cxt,x,y,R,rot){
            cxt.save();

            //进行平移操作
            cxt.translate(x,y);
            //进行旋转操作
            cxt.rotate(rot/180 * Math.PI);
            //使用scale进行缩放，但是为防止对边框宽度进行缩放，就需要将跟边框相关的属性去掉
            cxt.scale(R,R);
            startPath(cxt);

            cxt.fillStyle = '#fb3';
            /*cxt.strokeStyle = '#fb5';
            cxt.lineWidth = 3;
            cxt.lineJoin = 'round';*/

            cxt.fill();
            //cxt.stroke();
            cxt.restore();
        }
        /*绘制单个标准五角星的函数*/
        function startPath(cxt){
            cxt.beginPath();
            for(var i = 0 ; i<5;i++){
                cxt.lineTo(Math.cos((18 + i * 72)/180 * Math.PI) ,

                                -Math.sin((18 + i * 72) / 180 * Math.PI) );
                    cxt.lineTo(Math.cos((54 + i * 72)/180 * Math.PI) * 0.5,

                                -Math.sin((54 + i * 72) / 180 * Math.PI) * 0.5 );
            }
        }
    </script>

变换矩阵

transform(),setTransform()

<script type="text/javascript">
    /**
     * transform(a,b,c,d,e,f)
     * 
     * 变换矩阵
     * a  c  e       
     * b  d  f
     * 0  0  1
     * 默认为单位矩阵
     * 1  0  0
     * 0  1  0
     * 0  0  1
     * a,d 水平、垂直缩放
     * b,c 水平、垂直倾斜
     * e,f 水平、垂直位移
     * 
     * @type {[type]}
     */
        var canvas = document.getElementById('canvas');

        canvas.width = 800;
        canvas.height = 800;

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

        context.fillStyle = 'red';
        context.strokeStyle = '#058';
        context.lineWidth = 5;
        context.save();
        context.transform(2,0.2,0.2,1.5,50,50);
        context.fillRect(50,50,300,300);
        context.strokeRect(50,50,300,300);
    </script>

transform()函数是可以级连的，即设置了好几个transform，下面的会在原有的基础上进行叠加

context.transform(2,0.2,0.2,1.5,50,50);
context.transform(2,0.2,0.2,1.5,50,50);
context.transform(2,0.2,0.2,1.5,50,50);

要想清楚掉原有的transform，使用setTransform(a,b,c,d,e,f)，会重新进行变换

填充样式

线性渐变

<script type="text/javascript">
    var canvas = document.getElementById('canvas');

        canvas.width = 800;
        canvas.height = 800;

        var context = canvas.getContext('2d');
    /**
     * Step 1
     * [create description]
     * @param  {[type]} xstart []
     * @param  {[type]} ystart [description]
     * @param  {[type]} xend   [description]
     * @param  {[type]} yend   [description]
     * @return {[type]}        [description]
     *
     * 两个坐标构成了一条线，这条线是渐变线
     */
    var grd = context.createLinearGradient(xstart,ystart,xend,yend);

    /**
     * Step 2
     * [ss description]
     * @param  {[type]} stop  [浮点值，决定关键色的位置]
     * @param  {[type]} color [关键色的颜色]
     * @return {[type]}       [description]
     */
    grd.addColorStop(stop,color);

    /**
     * 经过上面两步，grd就可以作为一个变量传递给fillStyleL了
     */
</script>

<script type="text/javascript">
    var canvas = document.getElementById('canvas');

        canvas.width = 800;
        canvas.height = 800;

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

    //斜线渐变
    // var linearGrad = context.createLinearGradient(0,0,800,800);
    //水平渐变线
    var linearGrad = context.createLinearGradient(0,0,800,0);
    //垂直渐变线
    // var linearGrad = context.createLinearGradient(0,0,0,800);

    linearGrad.addColorStop(0,'#fff');
    linearGrad.addColorStop(0.5,'#ddd');
    linearGrad.addColorStop(1,'#000');

    context.fillStyle = linearGrad;
    context.fillRect(0,0,800,800);
</script>

径向渐变

呈放射状，是基于两个圆之间的，而线性渐变是基于一条线之间的渐变

<!-- <script type="text/javascript">
    /**
     * 从（x0,y0）为圆心,r0为半径的圆开始
     * 到（x1,y1）位圆心，r1位半径的圆进行径向渐变
     */
    var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);

    grd.addColorStop(stop,color);
</script> -->

<script type="text/javascript">
    var canvas = document.getElementById('canvas');

        canvas.width = 800;
        canvas.height = 800;

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

    //径向渐变
    var radialGrad = context.createRadialGradient(400,400,0,400,400,500);

    radialGrad.addColorStop(0,'#fff');
    radialGrad.addColorStop(1,'#000');

    context.fillStyle = radialGrad;
    context.fillRect(0,0,800,800);
</script>

使用图片、画布、video填充画布

使用图片

<!--使用图片填充画布-->
<script type="text/javascript">
    var canvas = document.getElementById('canvas');

        canvas.width = 800;
        canvas.height = 800;

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

    var bgImage = new Image();
    bgImage.src = 'banner_cogobuy_750_444.png';
    bgImage.onload = function(){
        /**
         * repeat：x,y方向都会重复
         * no-repeat
         * repeat-x
         * repeat-y
         * @type {[type]}
         */
        var pattern = context.createPattern(bgImage,'repeat');
        context.fillStyle = pattern;
        context.fillRect(0,0,800,800);
    }
</script>

使用自定义的画布进行填充

<!--使用画布进行填充
    可以让我们自己绘制，自己填充图案
-->
<script type="text/javascript">
    var canvas = document.getElementById('canvas');

        canvas.width = 800;
        canvas.height = 800;

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

        ```var backCanvas = createCanvas();
        var pattern = context.createPattern(backCanvas,'repeat');```
        context.fillStyle = pattern;
        context.fillRect(0,0,800,800);


    //创建一个画布并返回
    function createCanvas(){
        var bgCanvas = document.createElement('canvas');
        bgCanvas.width = 100;
        bgCanvas.height = 100;
        var bgCanvasContext = bgCanvas.getContext('2d');
        drawStar(bgCanvasContext,50,50,50,0);
        return bgCanvas;
    }
    /**
     * 绘制星空
     */
    function drawStar(cxt,x,y,R,rot){
        cxt.save();

        //进行平移操作
        cxt.translate(x,y);
        //进行旋转操作
        cxt.rotate(rot/180 * Math.PI);
        //使用scale进行缩放，但是为防止对边框宽度进行缩放，就需要将跟边框相关的属性去掉
        cxt.scale(R,R);
        startPath(cxt);

        cxt.fillStyle = '#fb3';
        /*cxt.strokeStyle = '#fb5';
        cxt.lineWidth = 3;
        cxt.lineJoin = 'round';*/

        cxt.fill();
        //cxt.stroke();
        cxt.restore();
    }
    /*绘制单个五角星的函数*/
    function startPath(cxt){
        cxt.beginPath();
        for(var i = 0 ; i<5;i++){
            cxt.lineTo(Math.cos((18 + i * 72)/180 * Math.PI) ,

                            -Math.sin((18 + i * 72) / 180 * Math.PI) );
                cxt.lineTo(Math.cos((54 + i * 72)/180 * Math.PI) * 0.5,

                            -Math.sin((54 + i * 72) / 180 * Math.PI) * 0.5 );
        }
    }
</script>