• 前端——一些js的代码

    1. html>
    2. <html lang="en-us">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Simple DOM exampletitle>
    7.     <style>
    8.         body {
    9.             margin: 0;
    10.             overflow: hidden;
    11.         }
    12.     style>
    13.     <canvas class="myCanvas">
    14.         <p>添加恰当的反馈信息。p>
    15.     canvas>
    16.     <script>
    17.         var canvas = document.querySelector('.myCanvas');
    18.         var width = canvas.width = window.innerWidth;
    19.         var height = canvas.height = window.innerHeight;
    20.         var ctx = canvas.getContext('2d');
    21.         ctx.fillStyle = 'rgb(0, 0, 0)';
    22.         ctx.fillRect(0, 0, width, height);
    23.         ctx.fillStyle = 'rgb(255, 0, 0)';
    24.         ctx.fillRect(50, 50, 100, 150);
    25.         ctx.fillStyle = 'rgb(0, 255, 0)';
    26.         ctx.fillRect(75, 75, 100, 100);
    27.         ctx.fillStyle = 'rgba(255, 0, 255, 0.75)';
    28.         ctx.fillRect(25, 100, 175, 50);
    29.         ctx.strokeStyle = 'rgb(255, 255, 255)';
    30.         ctx.strokeRect(25, 25, 175, 200);
    31.         ctx.lineWidth = 5;
    32.         ctx.fillStyle = 'rgb(255, 0, 0)';
    33.         ctx.beginPath();
    34.         ctx.moveTo(50, 50);
    35.         // 绘制路径
    36.         ctx.fill();
    37.         function degToRad(degrees) {
    38.             return degrees * Math.PI / 180;
    39.         };
    40.         ctx.fillStyle = 'rgb(255, 0, 0)';
    41.         ctx.beginPath();
    42.         ctx.moveTo(50, 50);
    43.         ctx.lineTo(150, 50);
    44.         var triHeight = 50 * Math.tan(degToRad(60));
    45.         ctx.lineTo(100, 50+triHeight);
    46.         ctx.lineTo(50, 50);
    47.         ctx.fill();
    48.  
    49.  
    50.         ctx.fillStyle = 'rgb(0, 0, 255)';
    51.         ctx.beginPath();
    52.         ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false);
    53.         ctx.fill();
    54.  
    55.  
    56.         var image = new Image();
    57.         image.src = '22.png';
    58.         image.onload = function() {
    59.             ctx.drawImage(image, 50, 50);
    60.         }
    61.         // ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);
    62.         ctx.translate(width/2, height/2);
    63.         function degToRad(degrees) {
    64.             return degrees * Math.PI / 180;
    65.         };
    66.  
    67.         function rand(min, max) {
    68.             return Math.floor(Math.random() * (max-min+1)) + (min);
    69.         }
    70.  
    71.         var length = 250;
    72.         var moveOffset = 20;
    73.  
    74.         for(var i = 0; i < length; i++) {
    75.             ctx.fillStyle = 'rgba(' + (255-length) + ', 0, ' + (255-length) + ', 0.9)';
    76.             ctx.beginPath();
    77.             ctx.moveTo(moveOffset, moveOffset);
    78.             ctx.lineTo(moveOffset+length, moveOffset);
    79.             var triHeight = length/2 * Math.tan(degToRad(60));
    80.             ctx.lineTo(moveOffset+(length/2), moveOffset+triHeight);
    81.             ctx.lineTo(moveOffset, moveOffset);
    82.             ctx.fill();
    83.  
    84.             length--;
    85.             moveOffset += 0.7;
    86.             ctx.rotate(degToRad(5));
    87.         }
    88.     script>
    89. head>
    90. <body>
    91.  
    92.  
    93. body>
    94. html>

  • 相关阅读:
    实操演练 | 使用 Navicat 对 MySQL 表进行分区
    框架之SpringBoot基础（一）
    WPF数据模板
    中仑网络全站 Dubbo 2 迁移 Dubbo 3 总结
    java对mysql的json字段的新增或修改
    POSTGIS数据库操作
    tomcat-8.5.55 cluster配置session共享实现不停机部署
    java基于springboot同城绘本馆图书借阅报名系统
    php生成个性二维码
    Gradle【扫盲】使用简易教程
  • 原文地址：https://blog.csdn.net/qqqweiweiqq/article/details/128118531