HTML-canvas中图形变换练习--自用笔记

最新推荐文章于 2022-03-12 11:40:52 发布

qq_45584792

最新推荐文章于 2022-03-12 11:40:52 发布

阅读量330

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_45584792/article/details/122203598

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas变换实例练习</title>
    <link rel="stylesheet" href="../resetCss/resetCss.css">
    <style>
        body {
            background-color: black;

        }

        #canvas {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            background-color: white;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="300" height="300">
        <span>对不起，您的浏览器不支持画布功能，请更换您的浏览器</span>

    </canvas>
</body>
<script>
    window.onload = function () {
        // 设置一个值用来变换旋转角度的值
        var flage = 0;
        var scale = 0;
        // 设置一个值用来控制缩放的值
        var flageScale = 0;
        var canvas = document.getElementById("canvas");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            ctx.save();
            ctx.fillStyle = "black";

            // 下面这三段代码可以不写的，一样可以显示，写了是给了一个初始页面，不写是直接执行定时器代码进行显示
            // 更换坐标轴位置，使其位于画布中心
            ctx.translate(150, 150);
            // 更改图形初始位置，是图形位于画布中心
            ctx.fillRect(-50, -50, 100, 100);
            //  弹出保存的状态--此时的状态是坐标为（0,0）的时候的图形
            ctx.restore();

            // 设立定时器
            setInterval(function () {
                flage++;
                // 清除原来的图形--可以直接清除掉整个画布，因为上面弹出的是原来坐标轴原点为(0,0)时候的，所以清除的也是(0,0)的
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                    // 这个时候保存的依旧是(0,0)坐标轴时候的，然后在代码最后弹出，使得下次进入定时器的时候， 图形的坐标轴依旧是（0,0），从而又可以清除图形
                ctx.save();
                // 更换坐标轴位置，使其位于画布中心
                ctx.translate(150, 150);
                // 旋转，每次旋转的时候，根据进入定时器的次数不同，导致flage++;使得flage的值由不断上升，从而达到旋转，（因为清除了上一次的图形，所以不会有重叠的图形现象）
                ctx.rotate(flage*Math.PI/180);

                // 判断图形缩放是否到极值（本次设置最大图形为原本的两倍，最小为原本的0.2倍，之所以最小为0.2是因为scale最初为0，进入scale==0,使得flageScale=1，flageScale/50等于0.2）
                if(scale == 100){
                    flageScale = -1;
                }else if(scale == 0){
                    flageScale = 1;
                }
                scale+=flageScale;
                ctx.scale(scale/50,scale/50);

                ctx.beginPath();
                ctx.fillRect(-50,-50,100,100)
                ctx.restore();

            }, 1000/60)


        }
    }
</script>

</html>

内容是尚硅谷HTML5教学里面的canvas的例子，备注是自己的理解。

qq_45584792

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-canvas中图形变换练习--自用笔记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas变换实例练习</title> <link rel="stylesheet" href="../
复制链接

扫一扫