zoukankan      html  css  js  c++  java
  • (三)canvas绘制样式

    • beginPath()
      • 对画线点的一个开始限制
    • moveTo()
      • 画线的起点,只在开头使用
      • 参数两个x轴,y轴
    • lineTo()
      • 后续连线
      • 两个参数x轴,y轴
    • stroke()
      • 连线无填充
    • fill()
      • 填充,默认黑色
    • closePath()
      • 对画线点的一个结束限制
      • 自动起着连接起点的作用
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>(二)canvas绘制多边形</title>
    </head>
    <style>
    * {margin: 0;padding: 0;}
    body { background-color: black; }
    #c1 { background-color: #fff; }
    </style>
    <body>
    <canvas id="c1" width="400" height="400"></canvas>
    <script>
    var oC = document.getElementById("c1");
    var ctx = oC.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(200,200);
    ctx.lineTo(300,200);
    ctx.closePath();
    ctx.stroke();//只进行连线
     
    ctx.beginPath();
    ctx.moveTo(100,200);
    ctx.lineTo(200,300);
    ctx.lineTo(300,300);
    ctx.closePath();
    ctx.fill();//填充连线的多边形
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    将maven项目托管到github
    HDOJ_1215_七夕节
    HDOJ_1108_最小公倍数
    HDOJ_1061_Rightmost Digit
    HDON_1021_Fibonacci Again
    HDOJ_1008_Elevator
    HDOJ_1235_统计同成绩学生人数
    HDOJ_2006_求奇数的乘积
    HDOJ_1201_18岁生日
    HDOJ_1019_大二写_Least Common Multiple
  • 原文地址:https://www.cnblogs.com/bgwhite/p/9406795.html
Copyright © 2011-2022 走看看