html5——canvas画直线

最新推荐文章于 2023-01-13 22:23:18 发布

weixin_33754065

最新推荐文章于 2023-01-13 22:23:18 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/fj0716/p/4765743.html

本文通过一个具体的HTML Canvas示例，展示了如何使用JavaScript进行基本图形的绘制，包括线条的绘制和颜色的设置等。

<html>
    <head>
        <title>canvas demo</title>
    </head>
    <body>
        <canvas id="mycanvas" width="500px" height="500px" ></canvas>
        <script type="text/javascript">
            var mycanvas = document.getElementById("mycanvas");
            var mycontext = mycanvas.getContext("2d"); 

            mycontext.beginPath();
            mycontext.strokeStyle = "red";
            mycontext.moveTo(70, 140);
            mycontext.lineTo(140, 70);
            mycontext.lineTo(300,200);
            mycontext.lineWidth="5";
            mycontext.stroke();

            mycontext.beginPath();
            mycontext.strokeStyle = "blue";
            mycontext.moveTo(200, 200);
            mycontext.lineTo(400, 500);
            mycontext.stroke();
        </script>
        <style>
            #mycanvas{
                border: solid 1px;
            }
        </style>
        
    </body>
</html>