zoukankan      html  css  js  c++  java
  • html5 canvas ( 圆和切点曲线的绘制 ) arc, arcTo

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>canvas</title>
        <script type="text/javascript" src="../js/jQuery.js"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                outline: none;
                border: none;
            }
            #canvas{
                width: 7rem;
                margin: .25rem 0 0 1.5rem;
                border: 1px solid black;
            }
        </style>
    </head>
    <body> 
        <canvas id="canvas" width="1000" height="600"></canvas>
    </body>
    </html>
    <script type="text/javascript">
        /**
         * rem 布局初始化
         */
        $('html').css('font-size', $(window).width()/10);
        /**
         * 获取 canvas 画布
         * 获取 canvas 绘图上下文环境
         */
        var canvas = $('#canvas')[0];
        var cxt = canvas.getContext('2d');
        
        /**
         * 画圆 arc( 圆心的横坐标, 圆心的纵坐标, 半径的长度, 绘制的起始角度, 绘制的终结角度, 是否逆时针 )
         * 圆弧 arcTo(第一个控制点的横坐标, 第一个个控制点的纵坐标, 第二个人控制点的横坐标, 第二个控制点的纵坐标, 圆弧的半径)
         */
        
        /*
        cxt.arc(500, 300, 100, 0, 2*Math.PI, false);
        cxt.fill();
        */
        cxt.save();
        cxt.lineWidth = 3;
        cxt.strokeStyle = 'red';
        cxt.moveTo(100, 100);
        cxt.arcTo(700, 100, 700, 500, 300);
        cxt.stroke();
        cxt.restore();
        
        /**
         * 辅助线
         */
        cxt.strokeStyle = 'green';
        cxt.moveTo(100, 100);
        cxt.lineTo(700, 100);
        cxt.lineTo(700, 500);
        cxt.stroke();
    </script>
  • 相关阅读:
    移动运营四:如何优化页面布局
    移动运营三:如何进行场景洞察
    移动运营二:如何更加了解你的用户
    移动运营一:如何进行运营效果分析
    操作系统的系统调用
    从图灵机到操作系统的启动
    伸展树(splay tree)
    AVL树
    二叉搜索树
    表达式树
  • 原文地址:https://www.cnblogs.com/lovling/p/6628677.html
Copyright © 2011-2022 走看看