• canvas案例123


    1.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function draw(id){
                var canvas  = document.getElementById(id);
                var context = canvas.getContext("2d");
                var g1 = context.createLinearGradient(0,0,0,300);
                g1.addColorStop(0,"rgb(255,255,0)");
                g1.addColorStop(1,"rgb(0,255,255)");
                context.fillStyle = g1;
                context.fillRect(0,0,500,500);
                var g2 = context.createLinearGradient(0,0,300,0);
                g2.addColorStop(0,"rgba(0,0,255,0.5)");
                g2.addColorStop(1,"rgba(255,0,0,0.5)");
                for(var i=0;i<10;i++){
                    context.beginPath();
                    context.fillStyle = g2;
                    context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
                    context.closePath();
                    context.fill();
                }
            }
        </script>
    </head>
    <body onload="draw('canvas')">
        <canvas id="canvas" width="500" height="500"></canvas>
    
    </body>
    </html>
    

      



    2.
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function draw(id){
                var canvas = document.getElementById(id);
                if(canvas == null){
                    return false;
                }
                var context = canvas.getContext("2d");
                var g1 = context.createRadialGradient(400,100,0,400,100,400);
                g1.addColorStop(0.1,"rgb(255,255,0)");
                g1.addColorStop(0.3,"rgb(255,0,255)");
                g1.addColorStop(1,"rgb(0,255,255)");
                context.fillStyle = g1;
                context.fillRect(0,0,500,500);
            }
        </script>
    </head>
    <body onload="draw('canvas')">
        <canvas id="canvas" width="500" height="500"></canvas>
    
    </body>
    </html>
    

      



    3.
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function draw(id){
                var canvas = document.getElementById(id);
                if(canvas == null){
                    return false;
                }
                var context = canvas.getContext("2d");
                context.fillStyle="#eeeeef";
                context.fillRect(0,0,500,500);
                context.translate(200,50);
                context.fillStyle="rgba(255,0,0,0.25)";
                for(var i=0;i<50;i++){
                    context.translate(25,25);
                    context.scale(0.95,0.95);
                    context.rotate(Math.PI/10);
                    context.fillRect(0,0,100,50);
                }
            }
        </script>
    </head>
    <body onload="draw('canvas')">
        <!--translate(x,y) scale(x,y) rotate(deg)-->
        <canvas id="canvas" width="500" height="500"></canvas>
    </body>
    </html>
    

      

  • 相关阅读:
    02-model设计
    01-开发环境搭建
    04-Uwsgi配置启动Nginx虚拟主机配置
    03-MySQL安装与配置
    02-Nginx配置
    01-Nginx安装
    22-注册、登录、验证登录
    21-django-pure-pagination分页
    (二)windows上使用docker
    Docker在windows7上的安装
  • 原文地址:https://www.cnblogs.com/liao13160678112/p/6394507.html
Copyright © 2020-2023  润新知