zoukankan      html  css  js  c++  java
  • Canvas基础

    Canvas基础

    大道至简

    html

    index.html

    <!DOCTYPE HTML>  
    <html style="height:100%">  
    <head>
    <title>canvas基础</title>
    <meta charset="utf-8"/>
    <script src="canvas_demo.js"></script>
    </head>
    <body style="height:100%">
    <canvas id="canvas">
    请升级浏览器
    </canvas>
    </body>
    </html>
    

      

    js

    canvas_demo.js

    var canvas=document.getElementById("canvas");   
    var context=canvas.getContext("2d");
    canvas.width=document.body.clientWidth;
    canvas.height=document.body.clientHeight;
    
    context.beginPath()
    context.moveTo(0,0);
    context.lineTo(500,500);
    context.lineWidth=5;
    context.closePath()
    
    context.strokeStyle="red";
    context.stroke();
    
    context.beginPath()
    context.arc(500,200,150,0,2*Math.PI,true);
    context.closePath()
    
    context.strokeStyle="blue";
    context.stroke();
    
    context.beginPath()
    context.moveTo(800,200)
    context.lineTo(1200,100)
    context.lineTo(1400,500)
    context.closePath()
    
    context.fill()
    
    context.fillRect(1400,300,100,100)
    
    
    context.beginPath()
    context.moveTo(1400,100)
    context.lineTo(1600,400)
    context.closePath()
    
    var gnt1=context.createLinearGradient(1400,100,1600,400)
    gnt1.addColorStop(0,'red')
    gnt1.addColorStop(1,'yellow')
    context.strokeStyle=gnt1
    context.stroke()
    
    var gnt2=context.createLinearGradient(100,0,300,0)
    gnt2.addColorStop(0,'green')
    gnt2.addColorStop(0.5,'red')
    gnt2.addColorStop(1,'yellow')
    context.fillStyle=gnt2
    context.fillRect(100,600,200,100)
    
    context.beginPath()
    context.arc(600,800,100,0,1.5*Math.PI,true)
    context.closePath()
    
    context.stroke()
    
    
    var gtn=context.createRadialGradient(1200,600,50,1200,700,200)
    gtn.addColorStop(1,"blue")
    gtn.addColorStop(0,"red")
    context.fillStyle=gtn
    context.fillRect(1000,500,400,400)
    

      

    demo

    demo

    动态时间

  • 相关阅读:
    linux 命令——48 watch (转)
    linux 命令——47 iostat (转)
    linux 命令——46 vmstat(转)
    linux 命令——45 free(转)
    linux 命令——44 top (转)
    linux 命令——43 killall(转)
    linux 命令——42 kill (转)
    linux 命令——41 ps(转)
    linux 命令——40 wc (转)
    Java for LeetCode 068 Text Justification
  • 原文地址:https://www.cnblogs.com/xyws/p/5157956.html
Copyright © 2011-2022 走看看