zoukankan      html  css  js  c++  java
  • canvas 绘制 矩形 圆形

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
    <body>
    <!-- canvas的width/height默认都是300 -->
    <canvas id="fillRect" width="100" height="100"></canvas>
    <canvas id="strokeRect" width="100" height="100"></canvas>
    <canvas id="arc" width=" 400" height="400"></canvas>
    <script type="text/javascript">
    function canvasFillRect(id) {//绘制矩形 实心
    var canvas = document.getElementById(id);
    var context = canvas.getContext("2d");
    context.fillStyle = "pink";
    context.fillRect(0, 0, 100, 100);
    }
    canvasFillRect("fillRect");
    function canvasStrokeRect(id) {//绘制矩形 空心
    var canvas = document.getElementById(id);
    var context = canvas.getContext("2d");
    context.strokeStyle = "red";
    context.strokeRect(0, 0, 100, 100);
    }
    canvasStrokeRect("strokeRect");

    function canvasArc(id) {//绘制圆心 实心 空心
    var canvas = document.getElementById(id);
    var context = canvas.getContext("2d");
    //实心
    context.fillStyle = "green";
    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
    //空心
    context.beginPath();
    context.arc(210, 100, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.strokeStyle = "yellow";
    context.stroke();
    }
    canvasArc("arc");
    </script>
    </body>
    </html>

  • 相关阅读:
    JvisualVM、JMC监控远程服务器
    MVC学习笔记3
    MVC学习笔记2
    菜鸟级appium 必看
    关于redis一些问题记录
    git和github的区别
    VMware快照
    LR创建数据源读取excel
    mysql 5.7.18 源码安装笔记
    IDEA 配置Junit4
  • 原文地址:https://www.cnblogs.com/LLJ748211490/p/canvas.html
Copyright © 2011-2022 走看看