前端——一些js的代码

最新推荐文章于 2024-05-06 18:26:11 发布

qqqweiweiqq

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量210

点赞数

分类专栏：前端文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qqqweiweiqq/article/details/128118531

版权

前端专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple DOM example</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <canvas class="myCanvas">
        <p>添加恰当的反馈信息。</p>
    </canvas>
    <script>
        var canvas = document.querySelector('.myCanvas');
        var width = canvas.width = window.innerWidth;
        var height = canvas.height = window.innerHeight;
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = 'rgb(0, 0, 0)';
        ctx.fillRect(0, 0, width, height);
        ctx.fillStyle = 'rgb(255, 0, 0)';
        ctx.fillRect(50, 50, 100, 150);
        ctx.fillStyle = 'rgb(0, 255, 0)';
        ctx.fillRect(75, 75, 100, 100);
        ctx.fillStyle = 'rgba(255, 0, 255, 0.75)';
        ctx.fillRect(25, 100, 175, 50);
        ctx.strokeStyle = 'rgb(255, 255, 255)';
        ctx.strokeRect(25, 25, 175, 200);
        ctx.lineWidth = 5;
        ctx.fillStyle = 'rgb(255, 0, 0)';
        ctx.beginPath();
        ctx.moveTo(50, 50);
        // 绘制路径
        ctx.fill();
        function degToRad(degrees) {
            return degrees * Math.PI / 180;
        };
        ctx.fillStyle = 'rgb(255, 0, 0)';
        ctx.beginPath();
        ctx.moveTo(50, 50);
        ctx.lineTo(150, 50);
        var triHeight = 50 * Math.tan(degToRad(60));
        ctx.lineTo(100, 50+triHeight);
        ctx.lineTo(50, 50);
        ctx.fill();


        ctx.fillStyle = 'rgb(0, 0, 255)';
        ctx.beginPath();
        ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false);
        ctx.fill();


        var image = new Image();
        image.src = '22.png';
        image.onload = function() {
            ctx.drawImage(image, 50, 50);
        }
        // ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);
        ctx.translate(width/2, height/2);
        function degToRad(degrees) {
            return degrees * Math.PI / 180;
        };

        function rand(min, max) {
            return Math.floor(Math.random() * (max-min+1)) + (min);
        }

        var length = 250;
        var moveOffset = 20;

        for(var i = 0; i < length; i++) {
            ctx.fillStyle = 'rgba(' + (255-length) + ', 0, ' + (255-length) + ', 0.9)';
            ctx.beginPath();
            ctx.moveTo(moveOffset, moveOffset);
            ctx.lineTo(moveOffset+length, moveOffset);
            var triHeight = length/2 * Math.tan(degToRad(60));
            ctx.lineTo(moveOffset+(length/2), moveOffset+triHeight);
            ctx.lineTo(moveOffset, moveOffset);
            ctx.fill();

            length--;
            moveOffset += 0.7;
            ctx.rotate(degToRad(5));
        }
    </script>
</head>
<body>


</body>
</html>