HTML5中canvas的lineTo和moveTo的用法

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

sxjlinux

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

阅读量9.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sunxiaoju/article/details/49944309

本文介绍了一个使用HTML5 Canvas API进行2D绘图的基本示例。通过JavaScript代码设置了画布大小并绘制了两个简单的图形，展示了如何使用lineTo和stroke方法来创建线条和填充颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><pre name="code" class="javascript"><!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        function draw2D(){
            var canvas=document.getElementById("canvas-fram");
            if(canvas==undefined){
                return ;
            }
            canvas.width=1000;  //设置画布的宽
            canvas.height=1000; //设置画布的高
            var context=canvas.getContext("2d");
            context.strokeStyle = "rgb(250,0,0)";
            context.fillStyle = "rgb(250,0,0)";
            context.lineTo(100, 0);//起点坐标
            context.lineTo(0,200);//下一个坐标，经过此时，就会绘制从坐标100,0到坐标0,200的一条线段
            context.lineTo(200,200);//从坐标0,200到坐标200,200的一条线段
            context.lineTo(100, 0);//从坐标200,200到坐标100,0的一条线段

            context.moveTo(400,400);//先保存一个坐标
            context.lineTo(500,500);//从moveTo提供的坐标绘制到500,500
            context.stroke();//通过此函数将以上绘制的图形绘制到画布上
        }
    </script>
</head>
<body onload="draw2D()">
<canvas id="canvas-fram"></canvas>
</body>
</html>

运行效果如下：