Canvas

最新推荐文章于 2024-09-28 22:57:04 发布

思宇说 Java

最新推荐文章于 2024-09-28 22:57:04 发布

阅读量953

点赞数 30

文章标签： html5 canvas 动画

本文链接：https://blog.csdn.net/m0_46606920/article/details/142329874

版权

一、概述

长久以来，web 动画都是 Flash，缺点：安装 Flash Player，重量比较大，卡顿…

Canvas 是一个轻量级的画布，是 HTML 5 提出的一个新的 Canvas 标签

1.1 第一个程序（Hello Word）

    <canvas width = "500" height = "400">
           hahah 
    </canvas>

注意：width 和 height 不能使用 css 设置，会被拉伸

		<canvas width = "500" height = "400" id = "mycanvas">
            hahah 
        </canvas>

        <script>
            // 得到 canvas 画布
            var canvas = document.getElementById("mycanvas");
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "green"
            ctx.fillRect(100,100,200,200)
        </script>

效果如下图

在这里插入图片描述

ctx.fillRect(100,100,200,200)表示绘制一个矩形，前两个参数100，表示 x，y坐标，后两个参数200是长和宽

1.2、Canvas 的像素画

我们使用 canvas 绘制了一个图形，一旦绘制成功，canvas 就像素画了，canvas 没有能力从画布上再次得到这个图形，也就是没有能力修改已经在画布上的内容。
如果我们想让这个 canvas 图形移动，必须按照 清屏->更新->渲染

1.3、canvas 动画思想

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

        ctx.fillStyle = "blue"
        // 信号量
        var left = 100;
        // 动画
        setInterval(function(){
            // 清除画布
            ctx.clearRect(0,0,600,600);
            // 出界时往复
            if(left > 600){
                left = 100
            }
            left++;
            // 绘制矩形
            ctx.fillRect(left,100,100,100)

        })

    </script>
</body>

效果（向右运动）

在这里插入图片描述

1.4、面向对象思维实现 canvas 动画

因为canvas 不能得到已会制的对象，所以我们需要维持对象的状态。面向对象更加方便

<body>
    <canvas id="mycanvas" width="600" 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(){
            if(this.x > 600){
                this.x = 100
            }
            this.x++;
        };
        // 渲染
        Rect.prototype.render = function() {
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x ,this.y,this.w,this.h,this.color)
        }
        // 实例化
        var r1 = new Rect(100,100,200,100,"green")
        var r2 = new Rect(100,300,200,200,"red")
        // 动画过程
        setInterval(function(){
            ctx.clearRect(0,0,canvas.width,canvas.height)
            r1.update();
            r1.render();
            r2.update();
            r2.render();
        })
    </script>
</body>

效果
在这里插入图片描述

二、Canvas 绘制功能

2.1、绘制填充矩形

		 <script>
		 // 填充颜色
            ctx.fillStyle = "green"
           // 绘制矩形
            ctx.fillRect(100,100,200,200) // 参数 x，y，w，h（x 轴，y轴，宽度，高度）
        </script>

2.2、绘制矩形（边框）

		 <script>
            // 得到 canvas 画布
            var canvas = document.getElementById("mycanvas");
            var ctx = canvas.getContext("2d");
			// 绘制矩形的颜色
            ctx.strokeStyle = "green"
            // 绘制矩形
            ctx.strokeRect(100,100,200,200)
         </script>

效果

在这里插入图片描述

2.3、绘制路径

绘制不规则的多边形
路劲都是闭合的，绘制需要规定的步骤，设置（设置起点 -> 画路径 -> 封闭路径 -> 填充或绘制已封闭的形状）

	<canvas width = "500" height = "400" id = "mycanvas">
        当前浏览器不支持，请升级！！！ 
    </canvas>

    <script>
        // 得到 canvas 画布
        var canvas = document.getElementById("mycanvas");
        var ctx = canvas.getContext("2d");
		// 开始
        ctx.beginPath();
        // 第一个点
        ctx.moveTo(200,300) // 200，300，是x，y的坐标
		// 第二个点
        ctx.lineTo(400,200)
        // 第三个点
        ctx.lineTo(400,400)
        // 第四个点
        ctx.lineTo(200,400)
        // 闭合
        ctx.closePath()
		// 绘制颜色
        ctx.strokeStyle = "red"
        // 绘制
        ctx.stroke()
        //设置填充颜色
        ctx.fillStyle = "green"
        // 填充
        ctx.fill()
    </script>

效果

在这里插入图片描述

2.4、绘制圆弧

arc(x,y,radius,startAngle，endAngle,false)
画一个以（x，y）为圆心，以radius为半径的圆（弧），从startAngle开始到endAngle结束，按照anticlockwise 给定的方向生成（默认顺时针），（endAngle 取值范围 0-2*P）

	<canvas id="mycanvas" width="600" height="600">
    </canvas>
    <script>
        var canvas = document.getElementById("mycanvas") 
        var ctx = canvas.getContext("2d")
        ctx.beginPath();
        ctx.arc(200,300,100,0,2*3,false)  // （200，300）是圆心坐标，
        ctx.stroke();
    </script>