zoukankan      html  css  js  c++  java
  • html5中绘制图形:直线、举行、圆、三角线

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    *{
        padding:0px;
        margin:0px;
    }
    </style>
    <script type="text/javascript">
        function Draw(){
            //js中获取id节点
            var c=document.getElementById("mycanvas");
            c.width=500;
            c.height=500;
            var ctx=c.getContext("2d");
            //划直线
            ctx.moveTo(0,0);
            ctx.lineTo(200,200);
            ctx.stroke();//----------------------->划线,开始绘制
        }
        function Draw2(){
            //js中获取id节点
            var c=document.getElementById("mycanvas");
            c.width=500;
            c.height=500;
            var ctx=c.getContext("2d");
            
            ctx.fileStyle="#ff0000";
            ctx.fillRect(0,0,200,200);
        }
        
        //圆形
        function Draw1(){
            var c=document.getElementById("mycanvas");
            c.width=5000;
            c.height=5000;
            var ctx=c.getContext("2d");
            
            ctx.fillStyle="green";//设置颜色
            ctx.beginPath();
            ctx.arc(500,500,80,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fill();            //填充颜色
            
        }
        
        //三角形
        function Draw3(){
            var c=document.getElementById("mycanvas");
            c.width=500;
            c.height=500;
            var ctx=c.getContext("2d");
            
            ctx.strokeStyle="#ff0000";//------------------>给实线上色
            ctx.beginPath();
            ctx.moveTo(25,25);
            ctx.lineTo(25,125);
            ctx.lineTo(125,25);
            ctx.closePath();
            ctx.stroke();
        }
        
    </script>
    </head>
    <body>
        <canvas id="mycanvas"></canvas>
        <input type="button" value="画直线" onclick="Draw();">
        <input type="button" value="画圆" onclick="Draw1();">
        <input type="button" value="画三角形" onclick="Draw3();">
        <input type="button" value="画矩形" onclick="Draw2();">
    </body>
    </html>

  • 相关阅读:
    笔试助攻题(思路)
    const 修饰成员函数 前后用法(effective c++ 03)
    UNIX 是啥?!和Linux什么关系?
    我的offer之路(一)
    我的offer之路(一)
    ANSI C 与 K&R C
    c内置数据类型
    预处理器
    小数用二进制如何表示
    C++中有三种创建对象的方法
  • 原文地址:https://www.cnblogs.com/gf36500/p/6873628.html
Copyright © 2011-2022 走看看