zoukankan      html  css  js  c++  java
  • HTML5绘制几何图形

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>绘制几何图形</title>
    </head>
    <body>
       <!-- fillRect(float x,float y,float width,float height)填充一个矩形区域
        strokeRect(float x,float y,float width,float height)绘制一个矩形边框-->
        <canvas id="myCanvas" width="400" height="600" style="border:3px dashed #000"></canvas>
        <script>
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            //设置填充颜色
            ctx.fillStyle = "#ccc";
            //填充一个矩形
            ctx.fillRect(30, 30, 250, 100);
            ctx.fillStyle = "#f00";
            ctx.fillRect(40, 100, 150, 150);

            //设置线条颜色
            ctx.strokeStyle = "#F3B73F";
            //设置线条的宽度
            ctx.lineWidth = 6;
            ctx.strokeRect(30, 200, 100, 100);

            ctx.strokeStyle = "#F57284";
            //设置线条链接点的风格
            ctx.lineJoin = "meter";
            ctx.strokeRect(50, 315, 120, 60);

            ctx.strokeStyle = "#B19941";
            ctx.lineJoin = "round";
            ctx.strokeRect(50, 400, 120, 60);

            ctx.strokeStyle = "#A6AAA9";
            ctx.lineJoin = "bevel";
            ctx.strokeRect(60, 470, 120, 60);
        </script>
    </body>
    </html>

  • 相关阅读:
    百度地图api
    白岩松视频
    rails3 unicorn部署
    rails3 unicorn部署
    rails3 unicorn部署
    nginx geoip 模块实现地区性负载均衡
    workingwithrails
    rails部署方案
    rails3使用cucumber和rspec进行测试
    rails3 unicorn部署
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3165984.html
Copyright © 2011-2022 走看看