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");//获取画布的DOM
    var context=canvas.getContext('2d');//设置绘图环境为2d
    context.lineWidth=1;
    context.strokeStyle="red";
    context.moveTo(50,50);
    context.lineTo(100,50);
    context.lineTo(100,100);
    context.lineTo(50,100);
    context.lineTo(50,50);//或者context.closePath()
    context.stroke();
    </script>

    lineWidth:矩形的线宽;

    strokeStyle:线宽的颜色

    moveTo:起点

     closePath:将最后一个点与起点连接起来

    lineTo:终点

    stroke:开始绘制图;

    二. 绘制直线

    <canvas id="canvas" style="500px;height:500px;background:#999">ddafc</canvas>
    <script type="text/javascript">
    var canvas=document.getElementById("canvas");//获取画布的DOM
    var context=canvas.getContext('2d');//设置绘图环境为2d
    context.lineWidth=1;
    context.strokeStyle="red";
    context.moveTo(50,50);
    context.lineTo(100,50);
    context.stroke();
    </script>

    三. 绘制三角形

    <canvas id="canvas" style="500px;height:500px;background:#999">ddafc</canvas>
    <script type="text/javascript">
    var canvas=document.getElementById("canvas");//获取画布的DOM
    var context=canvas.getContext('2d');//设置绘图环境为2d
    context.lineWidth=1;
    context.strokeStyle="red";
    context.moveTo(50,50);
    context.lineTo(100,50);

    context.lineTo(50,50);

    context.stroke();
    </script>

  • 相关阅读:
    八数码
    狂神说笔记——多线程05
    狂神说笔记——Java SE基础03
    从零开始的卷积神经网络
    深度学习与机器学习的区别
    模型的评估与选择
    经验风险VS风险函数
    常见的损失函数
    Erlang聊天室
    uniapp APP端 清除缓存
  • 原文地址:https://www.cnblogs.com/Litter-Tulip/p/5264370.html
Copyright © 2011-2022 走看看