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);

     

  • 相关阅读:
    JavaScript与C# Windows应用程序交互方法
    CREATE TABLE 表名 AS SELECT 语句
    从新开始
    window下安装redis
    最终,我们都变成了机器
    这个网址很学习
    改变你一生命运的话语 不得不信
    看《超级演说家》有感
    网页布局的一点感触
    最近状态不好
  • 原文地址:https://www.cnblogs.com/Litter-Tulip/p/5264442.html
Copyright © 2011-2022 走看看