HTML5 Canvas 绘制技术详解：圆形、直线与贝塞尔曲线-优快云博客

本文链接：https://blog.youkuaiyun.com/thystar/article/details/47449135

html5 canvas使用路径：

用canvas绘制圆形：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function draw(id){
            var canves = document.getElementById(id);
            if(canves==null){
                return false;
            }
            var context = canves.getContext("2d");
            context.fillStyle = "#eeeeef";
            context.fillRect(0,0,600,700);
            for(var i=0; i<=10;i++){
                context.beginPath();//绘制路径
                context.arc(i*25, i*25, i*10, 0, Math.PI*2, true);
                context.closePath(); //关闭绘制路径
                //指定绘制样式
                context.fillStyle = "rgba(255,0,0,0.25)";
                context.fill();



            }
        }
    </script>
</head>
<body onload="draw('canvas')">
<!--绘制圆形 ： 有四个步骤：
1. 开始创建路径
2. 创建图形的路径
3. 路径创建完成后关闭路径
4. 设计绘制的样式，调用绘制方法-->

<canvas id = "canvas" width="600px" height="700px"></canvas>


</body>
</html>

move To 与line to

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function draw(id){
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            context.fillStyle = "#eeeeef"; //图形边框的样式，填充颜色
            context.fillRect(0,0,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);
            }
            context.closePath();
            context.fill();
            context.stroke();
        }

    </script>
</head>
<body onload="draw('canvas')">
<!--move to将光标移动到坐标点，绘制直线时以其为起点-->
<!--line to 在指定的起点和终点之间绘制直线-->

<canvas id="canvas" width="300" height="400"></canvas>
</body>
</html>

绘制贝塞尔曲线：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function draw(id){
            var canvas = document.getElementById(id);
            if(canvas == null){
                return false;
            }
            var context = canvas.getContext("2d");
            context.fillStyle = "#eeeeef";
            context.fillRect(0, 0,300,400);
            var dx = 150;
            var dy = 150;
            var s = 100;
            context.beginPath();
            context.fillStyle = "rgb(100,255,100)";
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI/15*11;
            context.moveTo(dx,dy);
            for(var i=0; i<30; i++){
                var x = Math.sin(i*dig);
                var y = Math.cos(i*dig);
                context.bezierCurveTo(dx+x*s, dy+y*s-100,dx+x*s+100, dy+y*s,dx+x*s,dy+y*s);
            }
            context.closePath();
            context.fill();
            context.stroke();
        }
    </script>
</head>
<body onload="draw('canvas')">
<!--bezierCurveTo(cp1x, cp1y, cp2x,cp2y,x,y)
控制点：cp1x,cp1y，第一个控制点的坐标值， cp2x,cp2y，第二个控制点的坐标值：
-->
<canvas id="canvas"  width="300" height="400"></canvas>

</body>
</html>