zoukankan      html  css  js  c++  java
  • 绘制矩形的简单方法

    <canvas id="canvas" style="500px;height:500px;background:#999">ddafc</canvas>
    <script type="text/javascript">
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext('2d');
    context.lineWidth=1;
    context.strokeStyle="red";
    context.moveTo(50,50);
    context.lineTo(100,50);
    context.lineTo(100,100);
    context.lineTo(50,100);
    context.closePath();
    //context.lineTo(50,50);
    context.stroke();

    context.beginPath();
    context.lineWidth=5;
    context.strokeStyle="pink";
    context.rect(80,80,60,60);//第一种方法
    context.stroke();
    </script>

    beginPath:在上一个图的基础上重新绘制另一个图;

    rect(x,y,w,h):绘制矩形的起点坐标及长宽

    <canvas id="canvas" style="500px;height:500px;background:#999">ddafc</canvas>
    <script type="text/javascript">
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext('2d');
    context.beginPath();
    context.lineWidth=5;
    context.strokeStyle="pink";
    context.rect(10,10,60,60);
    context.stroke();

    context.beginPath();
    context.lineWidth=5;
    context.strokeStyle="red";
    context.strokeRect(10,80,60,60);//第二种方法

    strokeRect(x,y,w,h):相当于rect和stroke的结合体;

    以下两种是有填充的

    //第三种方法

    context.beginPath();
    context.lineWidth=5;
    context.fillStyle="pink";//填充色
    context.rect(80,10,60,60);
    context.fill();//与stroke方法作用相同

    //第四种方法
    context.beginPath();
    context.lineWidth=5;
    context.fillStyle="red";
    context.fillRect(80,80,60,60);

     

  • 相关阅读:
    STM32的DMA
    STM32串口接收不定长数据原理与源程序(转)
    推挽与开漏
    开关量输入检测与输出的电路设计(转)
    理解一下单片机的I2C和SPI通信
    电阻桥的作用(转)
    为什么工业上用4到20毫安电流传输数据(转)
    Keil的标题“礦ision3" 的改变(转)
    epplus动态合并列数据
    npm脚本编译代码
  • 原文地址:https://www.cnblogs.com/Litter-Tulip/p/5264442.html
Copyright © 2011-2022 走看看