[html] 学习笔记-Canvas使用路径

时间：2021-06-29 11:50:50

想要绘制其他图形，需要使用路径，使用路径包含4个步骤，开始创建路径、创建图形的路径、路径创建完成后关闭路径、设定绘制样式，之后就可以调用绘制方法绘制路径了。

1、绘制圆形

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <script>
         function draw(id){
             var canvas = document.getElementById("canvas");
             if(canvas == null){
                 return false;
             }
             var context = canvas.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')">
     <canvas id="canvas" width="600px" height="700px"></canvas>
 </body>
 </html>

2、moveTo与lineTo

moveTo:将光标移动到指定坐标点

lineTo:指定直线的终点

 <!DOCTYPE html>
 <html>
 <head>
     <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')">
     <canvas id="canvas" width="300" height="400"></canvas>
 </body>
 </html>

3、使用bezierCurveTo绘制贝塞尔曲线

 <!DOCTYPE html>
 <html>
 <head>
     <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,第二个控制点的坐标-->
     <!--x,y：相当于lineTo的x,y-->
     <canvas id="canvas" width="300px" height="400px"></canvas>
 </body>
 </html>

相关文章