canvas使用

canvas使用

1 canvas绘制基本

1 概念

HTML5<canvas>元素用于图形的绘制,区别于css,它的绘制通过javascript来完成绘制的

<canvas>标签只是图形容器,必须使用及保本来绘制图形

Canvas API主要聚焦与2D图形。同时<canvas>元素的WebGL API则用于绘制硬件加速的2D和3D图形

2 绘制矩形

html 复制代码
<canvas id="canvas" width="200" height="200"></canvas>
<script>
    /* 获取画布 */
    var canvas = document.getElementById("canvas");
    /* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */
    const ctx = canvas.getContext('2d');
    /* 填充颜色 */
    ctx.fillStyle = '#ff2d51';
    /* 绘制矩形fillRect(x,y,width,height) x,y 分别是横轴 纵轴起点位置,width height 表示绘制的宽,高大小*/
    ctx.fillRect(10,10,100,100);
</script>

3 canvas中的坐标

canvas是一个二维网络

canvas的左上角坐标为(0,0)

绘制矩形fillRect(x,y,width,height) x,y 分别是横轴 纵轴起点位置,width height 表示绘制的宽,高大小

4 绘制途径

所谓的路径:就是连续的坐标点的集合

在canvas上画线,可以使用一下两种方法

  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标

绘制线条必须使用到stroke()方法,执行绘制

html 复制代码
<canvas id="canvas" width="200" height="200"></canvas>
<script>
    /* 获取画布 */
    var canvas = document.getElementById("canvas");
    /* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */
    const ctx = canvas.getContext('2d');
    /* 绘制路径 */
    ctx.moveTo(0,0)
    ctx.lineTo(100,100)
    /* 填充颜色 */
    ctx.strokeStyle = '#ff2d51';
    ctx.stroke();
</script>

5 绘制圆

html 复制代码
<canvas id="canvas" width="200" height="200"></canvas>
<script>
    /* 获取画布 */
    var canvas = document.getElementById("canvas");
    /* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */
    const ctx = canvas.getContext('2d');
    /* 绘制路径 */
    ctx.beginPath()
    /* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */
    ctx.arc(100,100,50,0,Math.PI*2)
    ctx.closePath()
    /* 填充颜色 */
    ctx.fillStyle = '#ff2d51';
    ctx.fill();
    /* 边颜色 */
    ctx.strokeStyle = '#333';
    /* 边宽 */
    ctx.lineWidth = 5;
    ctx.stroke();
</script>
1 绘制多个圆
html 复制代码
<canvas id="canvas" width="400" height="400"></canvas>
<script>
    /* 获取画布 */
    var canvas = document.getElementById("canvas");
    /* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */
    const ctx = canvas.getContext('2d');
    /* 绘制路径 */
    ctx.beginPath()
    /* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */
    ctx.arc(200,200,100,0,Math.PI*2)
    ctx.closePath()
    /* 填充颜色 */
    ctx.fillStyle = '#ff2d51';
    ctx.fill();

    // 后绘制 覆盖先绘制的

    ctx.beginPath()
    /* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */
    ctx.arc(200,200,50,0,Math.PI*2)
    ctx.closePath()
    /* 填充颜色 */
    ctx.fillStyle = '#333';
    ctx.fill();
    ctx.stroke();
</script>
2 绘制动画的圆
html 复制代码
<canvas id="canvas" width="400" height="400"></canvas>
<script>
    /* 获取画布 */
    var canvas = document.getElementById("canvas");
    /* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */
    const ctx = canvas.getContext('2d');
    var increateFlag = true;
    var radius = 50
    function draw(){
        /* 清除指定矩形内的形状 */
        ctx.clearRect(0,0,canvas.width,canvas.height)
        /* 绘制路径 */
        ctx.beginPath()
        /* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */
        ctx.arc(200,200,radius,0,Math.PI*2)
        ctx.closePath()
        /* 填充颜色 */
        ctx.fillStyle = '#ff2d51';
        ctx.fill();
        ctx.stroke();

        if(radius > 100){
            increateFlag = false;
        }else if(radius < 50){
            increateFlag = true;
        }
        if(increateFlag){
            radius++;
        }else{
            radius--;
        }
    }

    // draw();
    setInterval(draw,20);
</script>
3 绘制多圈动画
html 复制代码
<canvas id="canvas" width="400" height="400"></canvas>
    <script>
        /* 获取画布 */
        var canvas = document.getElementById("canvas");
        /* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */
        const ctx = canvas.getContext('2d');
        var increateFlag = true;
        var radius = 50
        function draw(){
            /* 清除指定矩形内的形状 */
            ctx.clearRect(0,0,canvas.width,canvas.height)

            /* 绘制路径 */
            ctx.beginPath()
            /* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */
            ctx.arc(200,200,radius,0,Math.PI*2)
            ctx.closePath()
            /* 填充颜色 */
            ctx.fillStyle = '#ff2d51';
            ctx.fill();

            // 后绘制 覆盖先绘制的

            /* 绘制路径 */
            ctx.beginPath()
            /* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */
            ctx.arc(200,200,25,0,Math.PI*2)
            ctx.closePath()
            /* 填充颜色 */
            ctx.fillStyle = 'blue';
            ctx.fill();

            ctx.stroke();

            if(radius > 100){
                increateFlag = false;
            }else if(radius < 50){
                increateFlag = true;
            }
            if(increateFlag){
                radius++;
            }else{
                radius--;
            }
        }

        // draw();
        setInterval(draw,20);
    </script>
相关推荐
m0_748257182 分钟前
Spring Boot FileUpLoad and Interceptor(文件上传和拦截器,Web入门知识)
前端·spring boot·后端
桃园码工19 分钟前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
百万蹄蹄向前冲1 小时前
2024不一样的VUE3期末考查
前端·javascript·程序员
轻口味1 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami1 小时前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
吃杠碰小鸡2 小时前
lodash常用函数
前端·javascript
emoji1111112 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼2 小时前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250032 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O2 小时前
vue3 如何使用 mounted
前端·javascript·vue.js