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>

  • 相关阅读:
    最权威的 Android Oreo 新特性详解
    【送书福利】第一次送书活动(总共10本)
    【资源篇】Python那么火,你还不知道如何人门?
    不忘初心,方得始终 ,让我们一起学习成长,感谢有你!
    搭建环境篇 | 运行第一个Java Web 项目
    为什么我们需要看技术公众号文章?
    手把手教学APK反编译实现源码阅读
    分享一款 Google Pixel 2 独家动态壁纸
    了解CoordinatorLayout,在项目中运用
    jdk 与 jre的区别
  • 原文地址:https://www.cnblogs.com/gf36500/p/6873628.html
Copyright © 2011-2022 走看看