zoukankan      html  css  js  c++  java
  • canvas 例子

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>canvas_demo</title>
    <meta name="Keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <link href="http://demo.z01.com/dist/css/bootstrap4.min.css" rel="stylesheet"/>
    <link href="http://demo.z01.com/dist/css/font-awesome.min.css" rel="stylesheet"/>
    <script src="http://demo.z01.com/JS/jquery.min.js" ></script>
    <script src="http://demo.z01.com/dist/js/popper.min.js"></script>
    <script src="http://demo.z01.com/dist/js/bootstrap4.min.js"></script>
    <script src="http://demo.z01.com/dist/js/trianglify.min.js"></script>
    </head>
    <body>
    <style>
    #my_canvas h1 {
        position: absolute;
        left: 20%;
        bottom: 4rem;
        font-size: 2rem;
        font-weight: 100;
        color: #fff;
        z-index: 1;
    }
    #my_canvas {
        position: relative;
        height: 62vh;
        overflow: hidden;
    }
    </style>
    
    
    <div id="my_canvas">
    <h1>canvas 文字测试</h1>
    </div>
    
    
    <script>
    
    //智能背景画布
    var pattern = Trianglify({
    	 window.innerWidth,
    	height:1980,
    	x_colors: "PuOr"
    });
    var canvas = pattern.svg();
    canvas.style.position = "absolute";
    canvas.style.top = 0;
    canvas.style.left = 0;
    //canvas.style.height = 760;
    
    
    document.getElementById("my_canvas").appendChild(canvas);
    //主要依赖 http://demo.z01.com/dist/js/trianglify.min.js
    //
    //颜色列表
    //Greens
    //GnBu
    //PuBuGn
    //BuPu
    //PuRd
    //Reds
    //PuOr
    //BrBG
    //PRGn
    //PiYG
    //RdBu
    //RdGy
    //RdYlBu
    //Spectral
    //RdYlGn
    //
    //
    //
    //
    //
    //
    //
    //
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    VUE中实现iview的图标效果时遇到的一个问题
    VUE中获取url中的值
    VUE的生命周期
    基于Vue的省市区三级联动插件
    父子组件通讯(2)
    vue中声明式导航和编程式导航
    java Calendar(日历)
    java Date
    java equals
    java 内部类
  • 原文地址:https://www.cnblogs.com/shaozhu520/p/8698714.html
Copyright © 2011-2022 走看看