canvas

作者: 冰点雨 | 来源:发表于2022-07-06 09:48 被阅读0次

    注意:不能用样式设置宽高,使用属性 width height设置宽高

    画线

    WeChatae9e97d0ffc96506fde3954bc7c63678.png
    <body>
        <!-- 不能用样式设置宽高,使用属性 width height设置宽高-->
        <canvas  width="400" height="400"></canvas>
    </body>
    
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');
        ctx.moveTo(100,100);
        ctx.lineTo(100,200);
        ctx.lineTo(200,100);
        // 设置填充颜色
        ctx.fillStyle="red";
        ctx.fill();
        // 设置线的颜色
        ctx.strokeStyle="yellow";
        ctx.lineWidth = "10";
        // 设置收尾相连
        ctx.closePath();
        ctx.stroke();
    </script>
    

    画矩形

    WeChat9d6834c1802fed70184c3043ec8faf6f.png
    <body>
        <!-- 不能用样式设置宽高,使用属性 width height设置宽高-->
        <canvas  width="600" height="200"></canvas>
    </body>
    
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');
        // 边框
        ctx.strokeRect(10,100,40,100);
        // 填充
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.fillRect(100,100,40,100);
        ctx.stroke();
    </script>
    

    画圆形

    WeChat02c10f0b8e68db1ff7e1bc2c2ce59886.png
    <body>
        <!-- 不能用样式设置宽高,使用属性 width height设置宽高-->
        <canvas  width="600" height="400"></canvas>
    </body>
    
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');
        // 开始绘制
        ctx.beginPath();
        // .arc(x,y,r,开始弧度,结束弧度,是否逆时针绘制)   x,y 圆心坐标
        ctx.arc(100,100,50,0,2*Math.PI,true);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.strokeStyle="blue";
        ctx.lineWidth = '10';
        ctx.stroke();
    </script>
    

    画布清除与绘制文字

    清除画布

    ctx.clearRect(100,200,50,100);
    

    绘制文字

    ctx.font = "40px 微软雅黑";ctx.clearRect(0,0,600,400);
        ctx.fillStyle = "red";
        ctx.fillText('绘制文字',50,50);
    
    WeChate31ddd432ee94c0f8f190ac475779a9d.png
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');
         ctx.fillRect(100,200,100,200);
        //  清除整个画布
        //  ctx.clearRect(0,0,600,400);
        // 清除部分画布
        ctx.clearRect(100,200,50,100);
    
        // 绘制文字
        ctx.font = "40px 微软雅黑";
        ctx.fillStyle = "red";
        ctx.fillText('绘制文字',50,50);
    </script>
    

    练习:画柱形图

    WeChat7169ea06bd102562b11514e2bae63dc5.png
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <style>
            *{
                margin: 0px;
                padding:0px;
            }
            canvas{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <!-- 不能用样式设置宽高,使用属性 width height设置宽高-->
        <canvas  width="800" height="420"></canvas>
    </body>
    
    
    </html>
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');
    
        // 绘制文字
        ctx.font = "16px 微软雅黑";
        ctx.fillText('数据可视化',50,50);
    
        // 绘制坐标系
        ctx.moveTo(100,100);
        ctx.lineTo(100,400);
        ctx.lineTo(700,400);
    
        // 绘制横向分割线
        let vTexts = ['150','120','90','60','30','0'];
        let vSpaceHeight = 300/(vTexts.length-1);
        for (var i=0;i<vTexts.length;i++){
            if(i < vTexts.length-1){
                ctx.moveTo(100,100+i*vSpaceHeight);
                ctx.lineTo(700,100+i*vSpaceHeight);
            }
            ctx.fillText(vTexts[i],70,100+vSpaceHeight*i)
    
            // ctx.strokeStyle = "gray";
        }
    
         // 绘制水平轴底部的线
         let hTexts = ['食品','数码','服饰','箱包'];
         let hSpaceWidth = 600/hTexts.length;
         let textWidth = 20;
         let space = 60;
         let columnarWidth = hSpaceWidth-space;
         for (var i=0;i<hTexts.length;i++){
            ctx.moveTo(100+hSpaceWidth*(i+1),400);
            ctx.lineTo(100+hSpaceWidth*(i+1),410);
            ctx.fillText(hTexts[i],100+hSpaceWidth*i+hSpaceWidth/2-textWidth,415)
    
            ctx.fillStyle = "red";
            ctx.fillRect(100+hSpaceWidth*i+space/2,400-140,columnarWidth,140);
        }
        ctx.stroke();
    </script>
    
    
    

    相关文章

      网友评论

          本文标题:canvas

          本文链接:https://www.haomeiwen.com/subject/lzisbrtx.html