zoukankan      html  css  js  c++  java
  • 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>

    效果:

  • 相关阅读:
    Compression algorithm (deflate)
    tcpip数据包编码解析(chunk and gzip)_space of Jialy_百度空间
    What's the difference between the "gzip" and "deflate" HTTP 1.1 encodings?
    gzip压缩算法: gzip 所使用压缩算法的基本原理
    Decompressing a GZip Stream with Zlib
    Frequently Asked Questions about zlib
    how to decompress gzip stream with zlib
    自己动手写web服务器四(web服务器是如何通过压缩数据,web服务器的gzip模块的实现)
    What's the difference between the "gzip" and "deflate" HTTP 1.1 encodings?
    C语言抓http gzip包并解压 失败 C/C++ ChinaUnix.net
  • 原文地址:https://www.cnblogs.com/qisi007/p/11264209.html
Copyright © 2011-2022 走看看