HTML5——Canvas_02之【moveTo与lineTo】_canvas moveto lineto-CSDN博客

本文介绍如何使用HTML5的Canvas API进行基本图形绘制，包括设置画布、定义绘图上下文、填充颜色及使用lineTo方法绘制线条等。通过具体示例代码展示了如何创建一个动态的圆形路径。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>moveTo与lineTo</title>
    
    <script>
        function draw(id){
            var canvas=document.getElementById(id);//获取ID
            var context=canvas.getContext("2d");//声明这是个2d画面
            context.fillStyle="#eeeeef";//2d画面颜色（填充颜色）
            context.fillRect(0,0,300,400);//用矩形填充 宽300，高400

            var dx=150;
            var dy=150;
            var s=100;

            context.beginPath();//开始画
           
            context.fillStyle="rgb(100,255,100)";//填充矩形颜色
            context.strokeStyle="rgb(0,0,100)";//填充边框颜色
            var x=Math.sin(0);//正弦
            var y=Math.cos(0);//余弦
            var dig=Math.PI/15*11;//半径
            for(var i=0;i<30;i++)
            {
                var x=Math.sin(i*dig);
                var y=Math.cos(i*dig);
                context.lineTo(dx+x*s,dy+y*s);//lineTo是画线，线的长度
            }
            //关闭canvas
            context.closePath();
            //canvas开始填充
            context.fill();
            //canvas开始画
            context.stroke();


        }
    </script>
    
    
</head>

<body onload="draw("canvas");">
   <canvas id="canvas" width="300" height="400"></canvas>
</body>

</html>