canvas---从基础到实战

canvas是H5新增的一个元素，可以用来描绘各种你想描绘的东西。

canvas本身没有绘制能力，你可以把它当做一个容器，需要我们用脚本，也就是js来给他灌满水。

兼容性

1. IE9版本以上、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。

2. IE8 以及更早的版本不支持 <canvas> 元素。

基本用法

要想使用canvas，大致分三步：

第一步：页面中添加canvas元素

第二步：给该元素添加标识，并设置宽高

第三步：获取该元素，使用getContent()方法获取绘制属性和方法，开始绘制

下面我们简单画一个长方形：

<body>
    <canvas id="canvas-wrap" width="500" height="500">你的浏览器不支持canvas</canvas>
</body>
<script>
    // 获取canvas元素
    let canvasWrap = document.getElementById("canvas-wrap");
    // 获取属性和方法
    let context = canvasWrap.getContext("2d");
    // 开始绘制
    context.fillStyle="#FF0000";
    context.fillRect(0,0,150,75);
</script>

页面效果：

路径：

使用canvas可以支持多种在画布上绘制路径的方法，从而可以勾勒出多种线条

案例一：画一个直角：

<body>
    <canvas id="canvas-wrap" width="500" height="500">你的浏览器不支持canvas</canvas>
</body>
<script>
    // 获取canvas元素
    let canvasWrap = document.getElementById("canvas-wrap");
    // 获取属性和方法
    let context = canvasWrap.getContext("2d");
    // 移动
    context.moveTo(10,10);
    // 线条
    context.lineTo(100,10);
    context.lineTo(100,100);
    // 开始画
    context.stroke();
</script>

案例二：画一条曲线

<body>
    <canvas id="canvas-wrap" width="500" height="500">你的浏览器不支持canvas</canvas>
</body>
<script>
    // 获取canvas元素
    let canvasWrap = document.getElementById("canvas-wrap");
    // 获取属性和方法
    let context = canvasWrap.getContext("2d");
    // 移动
    context.moveTo(10,10);
    // 创建二次贝塞尔曲线
    context.quadraticCurveTo(20,100,200,20);
    // 开始画
    context.stroke();
</script>

附：贝塞尔曲线对照表：

ease：cubic-bezier(.25, .1, .25, 1)
liner：cubic-bezier(0, 0, 1, 1)
ease-in：cubic-bezier(.42, 0, 1, 1)
ease-out：cubic-bezier(0, 0, .58, 1)
ease-in-out：cubic-bezier(.42, 0, .58, 1)
In Out Back:cubic-bezier(0.68, -0.55, 0.27, 1.55)

案例三：画一个正方形并用绿色填充

<body>
    <canvas id="canvas-wrap" width="500" height="500">你的浏览器不支持canvas</canvas>
</body>
<script>
    // 获取canvas元素
    let canvasWrap = document.getElementById("canvas-wrap");
    // 获取属性和方法
    let context = canvasWrap.getContext("2d");
    // 移动
    context.moveTo(10,10);
    // 线条
    context.lineTo(100,10);
    context.lineTo(100,100);
    context.lineTo(10,100);
    context.lineTo(10,10);
    // 颜色设置
    context.fillStyle = "green";
    // 填充
    context.fill();
</script>

绘制矩形：

矩形是canvas给出的唯一能直接能用方法描绘的图形，他提供了四个方法。

案例：画两个矩形交叉，并清除叠加的部分：

<body>
    <canvas id="canvas-wrap" width="500" height="500">你的浏览器不支持canvas</canvas>
</body>
<script>
    // 获取canvas元素
    let canvasWrap = document.getElementById("canvas-wrap");
    // 获取属性和方法
    let context = canvasWrap.getContext("2d");
    //绘制一个矩形
    context.fillStyle = "#1fb19e";
    context.fillRect(0, 0, 100, 100);

    //绘制另一个矩形
    context.fillStyle = "blue";
    context.fillRect(50, 50, 100, 100);

    //将这两个矩形重叠的地方清除
    context.clearRect(50, 50, 50, 50);
</script>

文字：

1. canvas绘图上下文提供了2个绘制文本方法和一个相关方法

2. fillText()和strokeText()都可以接收4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。而measureText()接受一个参数，表示要测量的文本。

这三个方法共有的属性：

案例：画一个200*100的矩形，文字水平居中

<body>
    <canvas id="canvas-wrap" width="500" height="500">你的浏览器不支持canvas</canvas>
</body>
<script>
    // 获取canvas元素
    let canvasWrap = document.getElementById("canvas-wrap");
    // 获取属性和方法
    let context = canvasWrap.getContext("2d");
    //绘制一个矩形
    context.lineWidth=2
    context.strokeStyle="#1fb19e";
    context.rect(0,0,200,100);
    context.stroke()
    // 绘制文字
    let str = "Hello World";
    context.font="30px Microsoft YaHei";
    context.textAlign="center";
    context.strokeText(str,100,50);
</script>

图片：

案例：裁剪头像

<body style="display: flex">
    <img src="https://pic1.zhimg.com/80/v2-66f0648db805932fd3e8a94fcdd58f36_hd.jpg" id="img" />
    <canvas id="canvas-wrap" width="500" height="500" style="margin-left: 20px">你的浏览器不支持canvas</canvas>
</body>
<script>
     let img = document.getElementById("img");
     img.onload = function () {
         // 获取canvas元素
        let canvasWrap = document.getElementById("canvas-wrap");
        let context = canvasWrap.getContext("2d");
        context.drawImage(img,100,0,200,200,0,0,300,300);
     }
</script>

效果:

canvas转换成图片：

<body>
    <canvas id="canvas-wrap" width="1000" height="200">你的浏览器不支持canvas</canvas>
</body>
<script>
    // 获取canvas元素
    let canvasWrap = document.getElementById("canvas-wrap");
    // 获取属性和方法
    let context = canvasWrap.getContext("2d");
    //绘制一个矩形
    context.lineWidth=2
    context.strokeStyle="#1fb19e";
    context.rect(0,0,200,100);
    context.stroke()
    // 绘制文字
    let str = "Hello World";
    context.font="30px Microsoft YaHei";
    context.textAlign="center";
    context.strokeText(str,100,50);
    //取得图像的数据URI
    var url = canvasWrap.toDataURL("image/png");
    
    //显示图像
    var image = document.createElement("img");
    image.src = url;
    document.body.appendChild(image);
</script>

实战：

实战一：钟表的画法

<body>
    <canvas id="canvas-wrap" width="1000" height="200">你的浏览器不支持canvas</canvas>
</body>
<script>
    // 获取canvas元素
    let canvasWrap = document.getElementById("canvas-wrap");
    // 获取属性和方法
    let ctx = canvasWrap.getContext("2d");

    ctx.beginPath();
    ctx.arc(150,75,70,0,2*Math.PI);

    ctx.moveTo(215,75);
    ctx.arc(150,75,65,0,2*Math.PI);
    ctx.stroke();

    //变换原点
    ctx.translate(150,75);

    ctx.textBaseline = "middle";
    ctx.fillText('3',50,0);
    ctx.textAlign="center";  
    ctx.fillText('6',0,55);
    ctx.fillText('9',-50,0);
    ctx.fillText('12',0,-55);

    ctx.moveTo(0,0);
    ctx.lineTo(35,0);
    ctx.moveTo(0,0);
    ctx.lineTo(0,-50);

    ctx.stroke();
</script>

实战二：画一个简单的海报

<body>
<canvas id="canvas" width="1200" height="800"></canvas>
<img src="20190802165310.jpg" id="img" alt="">
<img id="imgTwo" src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=0003b03088b1cb133e693b15e56f3173/0bd162d9f2d3572c257447038f13632763d0c35f.jpg" alt="">
</body>
<script>
    var canvasWrap = document.getElementById("canvas");
    var ctx = canvasWrap.getContext("2d");
    var img = document.getElementById("img");
    var imgTwo = document.getElementById("imgTwo");
    // 画文字方法
    function drawText (ctx,text,font,x,y) {
        ctx.font=`${font}px Microsoft YaHei`;
        ctx.strokeText(text,x,y);
    }
    img.onload = function () {
        let arr = [
            {
                text:'马云，我想和你说',
                font: 40,
                x: 100,
                y: 100
            },
            {
                text:'不,你不说',
                font: 18,
                x: 400,
                y: 280
            },
            {
                text:'是什么让我唱出《西海情歌》？',
                font: 20,
                x: 50,
                y: 550
            }
        ]
        // 图片
        ctx.drawImage(img,0,0);
        ctx.drawImage(imgTwo,400,150,100,100);
        // 矩形
        ctx.fillStyle = "#1fb19e"
        ctx.fillRect(50, 570, 200,10);
        ctx.fillRect(50, 590, 100,10);
        ctx.fillRect(50, 610, 50,10);
        // 文字
        ctx.strokeStyle = "#fff";
        arr.forEach(el => {
            let { text, font, x, y} = el
            drawText(ctx, text, font, x, y)
        })  
    }
</script>

效果：

实战三：画一个柱状图

<body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
<script>
    var ocanvas = document.getElementById("canvas");
    var mycanvas = ocanvas.getContext("2d");
    var arr = [60,90,150,130,170,190,125,175,155,165,155,145];
 
    //第一先画xy轴
    function line(aX,aY,bX,bY) {//开始和结束的横坐标  开始和结束的纵坐标
        mycanvas.beginPath();
        mycanvas.moveTo(aX,aY);
        mycanvas.lineTo(bX,bY);
        mycanvas.stroke();
    }
    line(300,80,300,480);
    line(900,80,900,480);
 
    //第二用for循环 画11条线   利用上面line的画线方法
    for(var i=0;i<11;i++){
       //300,80,900,80
        //300,120,900,120
       line(300,80+i*40,900,80+i*40);
        write(200-i*20,280,80+i*40)
 
    }
    //第三定义一个矩形的函数方法
    function rect(X,Y,width,height) {
        mycanvas.beginPath();
        mycanvas.fillStyle="#abcdef";
        mycanvas.rect(X,Y,width,height);
        mycanvas.fill();
        mycanvas.closePath()
    }
 
    //第四定义一个方法  绘制横纵坐标
    function wenrect() {
        for(var i=0;i<12;i++){
            var width=30;
            var height=arr[i]*2;
            var X=310+i*40+i*10;
            var Y=480-height;
            rect(X,Y,width,height);
            write((i+1)+"月",320+i*40+i*10,500)
        }
    }
    wenrect();
 
    //添加字
    function write(start,ox,oy) {
        mycanvas.beginPath();
        mycanvas.fillStyle = "black";
        mycanvas.fillText(start,ox,oy);
        mycanvas.closePath();
    }
</script>

效果：