zoukankan      html  css  js  c++  java
  • html5 七巧板

    <!DOCTYPE html>
    <html>
        <canvas id="diag" height="200" width="200" style="border:1px solid">update your</canvas>
        <canvas id="diag2" height="200" width="200" style="border:1px solid">update your</canvas>
    </html>
    <script>
    position = [
     {p:[{x:0, y:0}, {x:800, y:0}, {x:400, y:400}], color:"#cfff67"},
     {p:[{x:0, y:0}, {x:400, y:400}, {x:0, y:800}], color:"#67becf"},
      {p:[{x:800, y:0}, {x:800, y:400}, {x:600, y:600}, {x:600, y:200}], color:"#6fbfcf"},
      {p:[{x:600, y:200}, {x:600, y:600}, {x:400, y:400}], color:"#6eefcf"},
      {p:[{x:400, y:400}, {x:600, y:600}, {x:400, y:800}, {x:200, y:600}], color:"#abe"},
      {p:[{x:200, y:600}, {x:400, y:800}, {x:0, y:800}], color:"#eab"},
      {p:[{x:800, y:400}, {x:800, y:800}, {x:400, y:800}], color:"#6e9ec9"},

    ]
    var canvas = document.getElementById('diag');     //huo
    var context = canvas.getContext('2d');   //获取canvas上下环境
    canvas.width = '800';
    canvas.height = '800';
    for(i=0; i<position.length; i++) {
        draw(position[i], context)
    }
    function draw(pe, context) {
        context.beginPath();
        context.moveTo(pe.p[0].x, pe.p[0].y);
        console.log(pe.p.length);
        // return;
        for (var i = 1; i < pe.p.length; i++) {
            // console.log(pe.p)
            context.lineTo(pe.p[i].x, pe.p[i].y)
        };
        context.closePath();
        context.fillStyle=pe.color;
        context.fill()
    }
    </script>

  • 相关阅读:
    正则元字符总表
    Request中的各种地址
    JSONP实例
    【Kindeditor编辑器】 文件上传、空间管理
    【加密算法】SHA
    【加密算法】DES
    【加密算法】3DES
    【加密算法】Base64
    【加密算法】MD5
    【加密算法】AES
  • 原文地址:https://www.cnblogs.com/agang-php/p/4822849.html
Copyright © 2011-2022 走看看