canvas-基本使用和动画原理

最新推荐文章于 2023-05-01 20:18:12 发布

敢问

最新推荐文章于 2023-05-01 20:18:12 发布

阅读量1.7k

点赞数 4

分类专栏： canvas 文章标签： canvas javascript

本文链接：https://blog.csdn.net/weixin_41040445/article/details/111059272

版权

canvas 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、canvas 绘图

1、canvas简介：web上的动画都是Flash。比如动画广告、游戏等等，基本上都是Flash实现的。Flash是有缺点的，比如需要安装Adobe Flash Player，漏洞多，重量比较大。卡顿和不流畅等等。HTML5提出了一个新的canvas标签，彻底颠覆了Flas 的主导地位。无论是广告、游戏都可以使用canvas实现了，Canvas是一个轻量级的画布，我们使用Canvas进行JavaScript的编程，不需要增加额外的插件，性能也很好，不卡顿，在手机中也很流畅

2、canvas 属性：canvas只有width和height 两个属性，表示画布的宽高。canvas的width和height不要用css的样式来设置，如果使用css的样式来设置，画布会失真，会变形。

3、标签中间的内容“当前的浏览器版本不支持，请升级浏览器”是用来提示低版本浏览器（IE6/7/8）。高版本浏览器看不到 canvas中间的内容。

<canvas width="800" height="600" id="mycanvas">当前的浏览器版本不支持，请升级浏览器</canvas>

4、canvas绘图：canvas本质上就是利用代码在浏览器的页面上进行绘画

<body>
    <canvas width="800" height="600" id="mycanvas">当前的浏览器版本不支持，请升级浏览器</canvas>
</body>
<script>
    var canvas = document.getElementById("mycanvas");
    // 得到画布的上下文，上下文有两个，2d的上下文和3d的上下文
    // 所有的图像绘制都是通过ctx属性或者 是方法进行设置的，和canvas标签没有关系了
    var ctx = canvas.getContext("2d");
    //设置颜色
    ctx.fillStyle = "blue";
    //绘图
    ctx.fillRect(100,100,200,100)
</script>

fillRect ： 4个参数，前两个代表，x 和 y 坐标，后两个代表绘制宽高

2、动画思想

canvas一旦绘制成功了，canvas就像素化了他们。canvas没有能力，从画布上再次得到这个图形，也就是说我们没有能力去修改已经在画布上的内容。这个就是canvas比较轻量的原因，Flash重的原因之一就有它可以通过对应的api得到已经上“画布”的内容然后再次绘制

如果我们想要让这个canvas图形移动，必须按照清屏-更新-渲染的逻辑进行编程，总之就是重新再画一次

canvas动画的原理：清屏-更新-渲染，因为canvas绘图完成，就被像素化了，所以不能通过style.left方法进行修改，而是必须要重新绘制

<canvas width="800" height="600" id="mycanvas"></canvas>
    <script>
        var canvas = document.getElementById("mycanvas");
        // 获取上下文
        var ctx = canvas.getContext("2d");
        //颜色
        ctx.fillStyle = "red";
        ctx.fillRect(100,100,250,100);

        //设置信号量
        var left = 100;
        setInterval(function(){
            // 清除画布，0,0,代表从什么位置开始清除，800,600代表清除的宽度和高度
            ctx.clearRect(0,0,800,600);
            left ++;
            ctx.fillRect(left,100,250,100);
        },10)
    </script>

实际上，动画的生存就是相关静态画面连续播放，这个就是动画的过程。把每一次绘制的静态画面叫做“一帧”，时间的间隔（定时器的间隔）就表示的是帧的间隔

3、面向对象思想实现canvas动画

canvas不能得到已经上屏的对象，所以要维持对象的状态，都使用面向对象来进行编程，因为可以使用面向对象的方式来维持canvas需要的属性和状态；

    <canvas id="mycanvas" width="800" height="600"></canvas>
    <script>
        var canvas = document.getElementById("mycanvas");
        var ctx = canvas.getContext("2d");

        function Rect(x,y,w,h,color){
            this.x = x;
            this.y = y;
            this.w = w;
            this.h = h;
            this.color = color;
        }
        Rect.prototype.update = function(){
            this.x ++;
        }
       
        Rect.prototype.render = function(){
            ctx.fillStyle = this.color
            ctx.fillRect(this.x,this.y,this.w,this.h);
        }
        var c1 = new Rect(100,100,100,100,"red");
        var c2 = new Rect(100,220,50,50,"blue")
        //动画过程在主定时器里面，每一帧都会调动实例的更新和渲染方法
        setInterval(function(){
            ctx.clearRect(0,0,800,600)
            c1.update()
            c1.render();
            c2.update()
            c2.render();
        },10)
    </script>

敢问

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas-基本使用和动画原理

1、canvas 绘图1、canvas简介：web上的动画都是Flash。比如动画广告、游戏等等，基本上都是Flash实现的。Flash是有缺点的，比如需要安装Adobe Flash Player，漏洞多，重量比较大。卡顿和不流畅等等。HTML5提出了一个新的canvas标签，彻底颠覆了Flas 的主导地位。无论是广告、游戏都可以使用canvas实现了，Canvas是一个轻量级的画布，我们使用Canvas进行JavaScript的编程，不需要增加额外的插件，性能也很好，不卡顿，在手机中也很流畅2、c
复制链接

扫一扫