zoukankan      html  css  js  c++  java
  • HTML5画:线、圆、矩形、渐变

    示例一:矩形

    <!DOCTYPE html><head> 
    <meta charset=utf-8> 
    <title>HTML5画线、圆、矩形</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head> 
    <script>
    $(document).ready(function(){
    var c=document.getElementById("drawbox");
    var draw=c.getContext("2d");        //获取2d内容的引用,调用绘图API
    draw.fillStyle="#ff0000";            //方式一指定填充颜色
    draw.fillRect(0,0,300,100);            //坐标和长宽
    draw.fillStyle="rgba(0,0,255,0.5)";    //方式二rgb+透明度
    draw.fillRect(400,0,100,100);        //坐标和长宽
    })
    </script>
    </body>
    <canvas id="drawbox" width="500" height="500"></canvas>
    </body> 
    </html> 

    示例二:线

    <!DOCTYPE html><head> 
    <meta charset=utf-8> 
    <title>HTML5画线、圆、矩形</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head> 
    <script>
    $(document).ready(function(){
    var c=document.getElementById("drawbox");
    var draw=c.getContext("2d");        //获取2d内容的引用,调用绘图API
    
    draw.strokeStyle="#000000";  //指定绘图线颜色 draw.moveTo(10,10); //起始位置 draw.lineTo(150,10); //终止位置 draw.lineTo(10,50); //结束前继续之前的结束点连接 draw.lineTo(10,50);
    draw.lineTo(10,10); draw.stroke();
    //结束 }) </script> </body> <canvas id="drawbox" width="500" height="500"></canvas> </body> </html>

     示例三:圆

    <!DOCTYPE html><head> 
    <meta charset=utf-8> 
    <title>HTML5画线、圆、矩形</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head> 
    <script>
    $(document).ready(function(){
    var c=document.getElementById("drawbox");
    var draw=c.getContext("2d");            //获取2d内容的引用,调用绘图API
    
    draw.fillStyle="red";                    //颜色
    draw.beginPath();                        //从新画
    draw.arc(50,50,50,0,Math.PI*2,true);     //圆心x坐标|圆心y坐标|直径|始|PI为圆周率,Math.PI*2为画圆|true为时针方向:逆时针,0为顺时针,
    draw.closePath();                        //结束
    draw.fill();
    })
    </script>
    </body>
    <canvas id="drawbox" width="500" height="500"></canvas>
    </body> 
    </html> 

    示例四:渐变

    <!DOCTYPE html><head> 
    <meta charset=utf-8> 
    <title>HTML5画线、圆、矩形</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head> 
    <script>
    $(document).ready(function(){
    var c=document.getElementById("drawbox");
    var draw=c.getContext("2d");        //获取2d内容的引用,调用绘图API
    
    //指定渐变区块
    var grd=draw.createLinearGradient(50,50,200,50); //坐标,长宽
    grd.addColorStop(0,"black");  //起点颜色
    grd.addColorStop(1,"green");        //终点颜色
    
    draw.fillStyle=grd;                //设为填充样式
    draw.fillRect(50,50,200,50);    //填充进矩形内
    })
    </script>
    </body>
    <canvas id="drawbox" width="500" height="500"></canvas>
    </body> 
    </html>

     同理所得~~自己尝试下吧

     实例:制作简单面板

  • 相关阅读:
    linux 短信收发
    sama5d3 环境检测 adc测试
    【Codeforces 723C】Polycarp at the Radio 贪心
    【Codeforces 723B】Text Document Analysis 模拟
    【USACO 2.2】Preface Numbering (找规律)
    【Codeforces 722C】Destroying Array (数据结构、set)
    【USACO 2.1】Hamming Codes
    【USACO 2.1】Healthy Holsteins
    【USACO 2.1】Sorting A Three-Valued Sequence
    【USACO 2.1】Ordered Fractions
  • 原文地址:https://www.cnblogs.com/tinyphp/p/3243456.html
Copyright © 2011-2022 走看看