HTML5-Canvas绘图几何图形

最新推荐文章于 2022-03-06 17:03:19 发布

MatrixSparse

最新推荐文章于 2022-03-06 17:03:19 发布

阅读量1.7k

点赞数

分类专栏： Web前端文章标签： html5 图形 2d

本文链接：https://blog.csdn.net/qq_25371579/article/details/51512273

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML5-Canvas绘制几何图形

CanvasRenderingContext2D对象，只提供两个方法来绘制几何图形

fillStyle = "颜色"
fillRect(float x,float y,float width,float height)
strokeStyle = "颜色"
lineWidth = 10
lineJoin - "meter|round|beve"
stokeRect(float x,float y,float width,float height)
并没有直接提供其他几何图形(圆形、椭圆、三角)等方法

index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>

    <body onload="init()">

        <canvas id="can" width="1200" height="300" style="border:1px solid red;"></canvas>

        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">
        function init(){
            var can = document.getElementById("can");
            var ctx = can.getContext("2d");
            ctx.fillStyle="#369";
            ctx.fillRect(50,50,100,60);

            ctx.strokeStyle = "#c30";
            ctx.lineWidth=0;
            ctx.lineJoin="miler"
            ctx.strokeRect(100,150,100,60)

            ctx.lineJoin = "round"
            ctx.strokeRect(230,200,100,65)

            ctx.lineJoin = "beve"
            ctx.strokeRect(200,80,300,65)

        }
        </script>
    </body>

</html>