其他分享
首页 > 其他分享> > html-canvas

html-canvas

作者:互联网

canvas

描述

HTML5 

实例

图形

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表单事件</title>
    <script type="text/javascript">
        //直线
        function line() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.clearRect(0,0,300,300);
            ctx.beginPath();
            ctx.moveTo(30,30);
            ctx.lineTo(200,30);
            ctx.closePath();
            ctx.strokeStyle = "#CCCCCC";
            ctx.stroke();
        }
        //长方形
        function rectangle() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.clearRect(0,0,300,300);
            ctx.fillStyle="#CCCCCC";
            ctx.fillRect(20,20,200,100);
        }
        //正方形
        function square() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.clearRect(0,0,300,300);
            ctx.fillStyle="#CCCCCC";
            ctx.fillRect(20,20,200,200);
        }
        function circle() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.clearRect(0,0,300,300);
            ctx.fillStyle="#CCCCCC";
            ctx.arc(150,150,100,0,2 * Math.PI, false);
            ctx.fill();
        }

    </script>
</head>
<body style="text-align:center;">
<div style="margin:auto;">
    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <br/>
    <input type="button" value="画直线" onclick="line()"/>
    <input type="button" value="画长方形" onclick="rectangle()"/>
    <input type="button" value="画正方形" onclick="square()"/>
    <input type="button" value="画圆形" onclick="circle()"/>
</div>

</body>
</html>

直线

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表单事件</title>
    <script type="text/javascript">
        //直线
        function line() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(30,30);
            ctx.lineTo(200,30);
            ctx.closePath();
            ctx.strokeStyle = "#CCCCCC";
            ctx.stroke();
        }
        //直线
        function line2() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(200,30);
            ctx.lineTo(200,200);
            ctx.closePath();
            ctx.strokeStyle = "#CCCCCC";
            ctx.stroke();
        }
        //直线
        function line3() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(200,200);
            ctx.lineTo(30,200);
            ctx.closePath();
            ctx.strokeStyle = "#CCCCCC";
            ctx.stroke();
        }
        //直线
        function line4() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(30,200);
            ctx.lineTo(30,30);
            ctx.closePath();
            ctx.strokeStyle = "#CCCCCC";
            ctx.stroke();
        }

    </script>
</head>
<body style="text-align:center;">
<div style="margin:auto;">
    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <br/>
    <input type="button" value="画直线1" onclick="line()"/>
    <input type="button" value="画直线2" onclick="line2()"/>
    <input type="button" value="画直线3" onclick="line3()"/>
    <input type="button" value="画直线4" onclick="line4()"/><br/>

</div>

</body>
</html>

方形

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表单事件</title>
    <script type="text/javascript">
        //长方形
        function rectangle() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.fillStyle="#11C5CC";
            ctx.fillRect(20,20,100,100);
        }

        //长方形
        function rectangle2() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.fillStyle="#68C9CC";
            ctx.fillRect(50,50,130,130);
        }

        //长方形
        function rectangle3() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.fillStyle="#C9CCCC";
            ctx.fillRect(80,80,160,160);
        }

        //长方形
        function rectangle4() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.fillStyle="#CCAEB0";
            ctx.fillRect(110,110,190,190);
        }

    </script>
</head>
<body style="text-align:center;">
<div style="margin:auto;">
    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <br/>
    <input type="button" value="画方形1" onclick="rectangle()"/>
    <input type="button" value="画方形2" onclick="rectangle2()"/>
    <input type="button" value="画方形3" onclick="rectangle3()"/>
    <input type="button" value="画方形4" onclick="rectangle4()"/><br/>

</div>

</body>
</html>

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表单事件</title>
    <script type="text/javascript">
        function circle() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.beginPath();
            ctx.arc(150,150,50,0,2 * Math.PI);
            ctx.stroke();
        }
        function circle2() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.beginPath();
            ctx.arc(150,150,60,0,2 * Math.PI);
            ctx.stroke();
        }
        function circle3() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.beginPath();
            ctx.arc(150,150,70,0,2 * Math.PI);
            ctx.stroke();
        }
        function circle4() {
            let c=document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.beginPath();
            ctx.arc(150,150,80,0,2 * Math.PI);
            ctx.stroke();
        }
        function clear2() {
            let c = document.getElementById("myCanvas");
            let ctx=c.getContext("2d");
            ctx.clearRect(0,0,300,300);

        }
    </script>
</head>
<body style="text-align:center;">
<div style="margin:auto;">
    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <br/>
    <input type="button" value="画圆1" onclick="circle()"/>
    <input type="button" value="画圆2" onclick="circle2()"/>
    <input type="button" value="画圆3" onclick="circle3()"/>
    <input type="button" value="画圆4" onclick="circle4()"/>
    <input type="button" value="清空" onclick="clear2()"/>

</div>

</body>
</html>

标签:function,canvas,ctx,myCanvas,getContext,html,let,document
来源: https://www.cnblogs.com/hu308830232/p/14911021.html