canvas

canvas简介

canvas是H5新增的一个标签。它可以通过javascript在其中绘制图像的HTML元素，可以用来处理照片集和实时视频处理和渲染。在页面上放置一个canvas就相当于一个画布，可以绘制出各种各样的图形。如果不利用js编写的话，canvas就是一个透明的区域。canvas自带两个属性值：width和height。接下来就让我们一起来学习吧！
首先我们要在页面上放置一个canvas元素

 <canvas id="canvas" width="500px" height="500px" style="border:1px solid red"></canvas>

一.绘制矩形的方法

fillStyle():设置矩形的颜色
fillRect():设置矩形的方法。有四个参数：startX,startY,endX,endY

 <canvas id="canvas" width="500px" height="500px" style="border:1px solid red"></canvas>
    <script>
        var canvas = document.getElementById("canvas").getContext("2d");
        canvas.fillStyle = "pink";
        canvas.fillRect(0,0,300,300);
    </script>   

二.绘制三角形的方法

众所周知三角形是由三个点中的线连接而成，所以我们先绘制三个点的线
moveTo()开始的位置
lineTo()线的位置
closePatn():结束连接，不加这个方法的话，就会有一条边绘制不出来
这两个方法都有两个参数：x轴和y轴，代表位置

 <canvas id="canvas" width="500px" height="500px" style="border:1px solid red"></canvas>
    <script>
        var canvas = document.getElementById("canvas").getContext("2d");
        canvas.moveTo(50,50);
        canvas.lineTo(200,50);
        canvas.lineTo(50,200);
        canvas.closePath();
        canvas.strokeStyle = "red"//绘制三角形三条边的颜色
        canvas.stroke();//绘制空心三角
    </script>

要想要实心的三角可以把上面的两个方法换成：fileStyle()和fill()

三.绘制圆形的方法

arc():里面有6个参数，分别是X（圆的中心的X坐标）,Y（圆的中心的Y坐标）,R(半径),起始角的度数（一般是写0），结束角的度数（Math.PI*2）,可选,规定应该逆时针还是顺时针绘图。False = 顺时针(默认)，true = 逆时针。

 var canvas = document.getElementById("canvas").getContext("2d");
        canvas.beginPath();//开始绘制
        canvas.arc(250,250,250,0,Math.PI*2);
        canvas.closePath();//结束绘制
        // canvas.stroke();//空心圆
        canvas.fill();//实心圆

四.绘制端点的方法

端点就是一个点加一条线，所以会用到moveTo和lineTo
lineCap():绘制端点两头形状的方法
lineWidth()：设置线条的宽度

 <canvas id="canvas" width="500px" height="500px" style="border:1px solid red"></canvas>
    <script>
        var canvas = document.getElementById("canvas").getContext("2d");
        canvas.lineWidth = 20;
        //平头端点
            canvas.beginPath();
            canvas.moveTo(50,50);
            canvas.lineTo(50,200);
            canvas.strokeStyle = "red"
            canvas.stroke();

            //round
            canvas.beginPath();
            canvas.moveTo(100,50);
            canvas.lineTo(100,200);
            canvas.lineCap = "round";
            canvas.stroke();
            //squafe
            canvas.beginPath();
            canvas.moveTo(150,50);
            canvas.lineTo(150,200);
            canvas.lineCap = "square";
            canvas.stroke();
    </script>

五.线条相交的形状设置方法

lineJoin:值：round:线条相交的形状时圆的
bevel：线条相交的形状是平的
miter：默认

<canvas id="canvas" width="500px" height="500px" style="border:1px solid red"></canvas>
    <script>
        var canvas = document.getElementById("canvas").getContext("2d");
        canvas.lineWidth = 5;
        canvas.beginPath();
        canvas.moveTo(50,50);
        canvas.lineTo(200,50);
        canvas.lineTo(50,200);
        canvas.closePath();
        canvas.strokeStyle = "red"
        // canvas.lineJoin = "round";//线条相交的形状时圆的
        // canvas.lineJoin = "bevel";//线条相交的形状是平的
        canvas.lineJoin = "miter";//默认
        canvas.stroke();
    </script>

六.弧线的绘制方法

arcTo():(x1,y1)从起点开始绘制弧线，到(x2,y2)结束，radius：弧度

<canvas id="canvas" width="500px" height="500px" style="border:1px solid red"></canvas>
    <script>
        var canvas = document.getElementById("canvas").getContext("2d");
        canvas.lineWidth = 5;
        canvas.beginPath();
        canvas.moveTo(50,50);
        canvas.arcTo(100,50,100,100,50);
        canvas.stroke();
    </script>

七.线性渐变的方法

createLinearGradient:(startX,startY,endX,endY):开始的x，y轴到结束的x，y轴
addColorStop:(number,color):百分比，颜色

 <canvas id="canvas" width="500px" height="500px" style="border:1px solid red"></canvas>
    <script>
        var canvas = document.getElementById("canvas").getContext("2d");
        // createLinearGradient(startX,startY,endX,endY)开始的x，y轴到结束的x，y轴
        //addColorStop(number,color):百分比，颜色
        var gradient = canvas.createLinearGradient(0,0,500,500);
        gradient.addColorStop(0,"red");
        gradient.addColorStop(.2,"pink");
        gradient.addColorStop(.4,"gray");
        gradient.addColorStop(.6,"blue");
        gradient.addColorStop(.8,"green");
        gradient.addColorStop(1,"purple");
        canvas.beginPath();
        canvas.arc(250,250,250,0,Math.PI*2);
        canvas.closePath();
        canvas.fillStyle = gradient;
        canvas.fill();
        // canvas.strokeStyle = gradient;
        // canvas.stroke();
    </script>

八.镜像渐变的方法

createRadialGradient(startX,startY,startR,endX,endY,endR):开始的x，y轴和圆的半径到结束的x，y轴和圆的半径

<canvas id="canvas" width="500px" height="500px" style="border:1px solid red"></canvas>
    <script>
        var canvas = document.getElementById("canvas").getContext("2d");
        var gradient = canvas.createRadialGradient(250,250,10,250,250,250);
        gradient.addColorStop(0,"red");
        gradient.addColorStop(.2,"pink");
        gradient.addColorStop(.4,"gray");
        gradient.addColorStop(.6,"blue");
        gradient.addColorStop(.8,"green");
        gradient.addColorStop(1,"purple");
        canvas.beginPath();
        canvas.arc(250,250,250,0,Math.PI*2);
        canvas.closePath();
        canvas.fillStyle = gradient;
        canvas.fill();
    </script>

九.绘制文本的方法

strokeText(string,x,y,widnt):要写的文字，x和y轴，最大像素宽度
fillText():
这两个方法都可以接收4个参数
这两个方法都以font,textAlign,textBaseline这三个属性为基础

 <canvas id="canvas" width="500px" height="500px" style="border:1px solid red"></canvas>
    <script>
        var canvas = document.getElementById("canvas").getContext("2d");
        canvas.font = "normal 50px Yahei";
        canvas.textAlign = "start";
        canvas.strokeStyle = "red"
        canvas.strokeText("笨小猪",50,50,100);
    </script>

十.绘制阴影的方法

shadowColor:表示颜色
shadowOffsetX:表示x方向的偏移量
shadowOffsetY:表示y方向的偏移量
shadowBlur:表示模糊度

<canvas id="canvas" width="500px" height="500px" style="border:1px solid red"></canvas>
    <script>
        var canvas = document.getElementById("canvas").getContext("2d");
        canvas.shadowColor = "red";
        canvas.shadowOffsetX = 5;
        canvas.shadowOffsetY = 5;
        canvas.shadowBlur = 5;
        canvas.fillRect(50,50,200,200);
    </script>

十一.绘制图像的方法

drawImage(img,x,y,width,height):图片，x，y轴，宽和高

 <canvas id="canvas" width="500px" height="500px" style="border:1px solid red"></canvas>
    <script>
        var canvas = document.getElementById("canvas").getContext("2d");
        var img = new Image();
        img.src = "./2.jpg";
        img.onload = function(){
            canvas.drawImage(img,0,0,200,200);
        }
    </script>