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>

  • 相关阅读:
    QML学习笔记之一
    使用 DLL 的优点
    制作Windows的ico图标
    CentOS安装JDK
    CentOS 7中安装和配置Promethues
    查看和指定SpringBoot内嵌Tomcat的版本
    CentOS中安装Azkaban 2.5
    Centos7 安装Nodejs
    SpringBoot实用技巧札记
    SQL实用札记【SQL Sever篇】
  • 原文地址:https://www.cnblogs.com/LLJ748211490/p/canvas.html
Copyright © 2011-2022 走看看