zoukankan      html  css  js  c++  java
  • canvas 画七巧板

    慕课网看到的,只是自己敲了一遍。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    </head>
    <body>
      <canvas id="canvas" style="border:1px solid #ccc;display:block;">
        当前浏览器不支持canvas,请更换浏览器后在试。
      </canvas>
    
    <script>
      var tangram = [
        {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},
        {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:'#ef3d61'},
        {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9f51a'},
        {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'},
        {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ecc'},
        {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'}
      ];
    
      window.onload = function () {
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
    
        canvas.width = 800;
        canvas.height = 800;
    
        for (var i = 0; i < tangram.length; i++)
          draw( tangram[i], context);
      }
    
      function draw(price, cxt) {
        cxt.beginPath();
        cxt.moveTo(price.p[0].x, price.p[0].y);
        for (var i = 1; i < price.p.length; i++)
          cxt.lineTo(price.p[i].x, price.p[i].y);
        cxt.closePath();
    
        cxt.fillStyle = price.color;
        cxt.fill();
      }
    </script>
    </body>
    </html>

    如下图所示:

    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    HDU4112
    HDU1059 二进制拆分优化多重背包
    HDU1087
    HDU1978How Many Ways 记忆化dfs+dp
    HDU1160FatMouse's Speed
    HDU1503Advanced Fruits
    CF337C
    337BRoutine Problem
    【★★★★★模板专区★★★★★】
    【水】Jam计数法
  • 原文地址:https://www.cnblogs.com/baixc/p/4834550.html
Copyright © 2011-2022 走看看