canvas学习笔记（二）----绘制路径

于 2019-11-02 16:52:58 发布
阅读量398 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： canvas 文章标签： canvas web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhangyr_student/article/details/102862172
本文是关于canvas学习的第二部分，主要介绍了canvas绘制路径的相关函数，如beginPath(), closePath(), stroke(), fill()等，并讲解了arc(), arcTo(), quadraticCurveTo(), bezierCurveTo()等用于创建复杂形状的方法。此外，还提到了Path2D对象的使用，包括从SVG导入路径。文章详细阐述了绘制路径的步骤，帮助读者掌握在canvas中绘制图形的基本流程。" 128439064,10035150,智慧应急指挥平台融合通信与可视化建设,"['大数据', '应急指挥', '融合通信', '可视化调度', '移动应急']

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

1.会使用的函数

1）beginPath()新建一条路径，生成后，图形绘制命令被指向路径上生成路径

2）closePath()闭合路径后图形绘制命令重新指向到上下文

3）stroke()通过线条来绘制图形轮廓

4）fill()通过填充路径的内容区域生成实心的图形

5）arc(x,y,radius,startAngle,endAngle,anticlockwise)以（x，y）为圆心以radius为半径的圆弧，从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

6）arcTo(x1,y1,x2,y2,radius)根据给定的控制点和半径画一段圆弧，以直线连接两个控制点

7）quadraticCurveTo(cp1x,cp1y,x,y)绘制二次贝塞尔曲线，cp1x、cp1y为控制点一，x、y为结束点

8）bezierCurveTo（cp1x,cp1y,cp2x,cp2y,x,y）绘制三次贝塞尔曲线，cp1x、cp1y为控制点一，cp2x、cp2y为控制点二，x、y为结束点

贝塞尔曲线图

Path2D对象：

1）new Path2D()空的path对象

2）new Path2D(path) 克隆path对象

3）new Path2D(d)  从SVG建立Path对象

 

2.绘制的步骤

1）创建路径起始点

2）画路径

3）封闭路径

4）路径生成，通过描边或填充区域来渲染图形

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day2-1</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="150" height="150">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getContext('2d')

        ctx.beginPath();
        ctx.moveTo(25, 25);
        ctx.lineTo(105,25);
        ctx.lineTo(25,125);
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(125, 125);
        ctx.lineTo(125,45);
        ctx.lineTo(45,125);
        ctx.closePath();
        ctx.stroke();
      }else{}
    }
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day2-2</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="150" height="150">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getContext('2d')

        ctx.beginPath();
        ctx.arc(75, 75, 50, 0, Math.PI*2, true);
        ctx.moveTo(110, 75);
        ctx.arc(75, 75, 35, 0, Math.PI, false);
        ctx.moveTo(65,65);
        ctx.arc(60,65,5,0,Math.PI*2,true)
        ctx.moveTo(95,65);
        ctx.arc(90,65,5,0,Math.PI*2,true)
        ctx.stroke()
      }else{}
    }
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day2-3</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="150" height="200">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getContext('2d')

        for(var i =0;i<4;i++){
          for(var j=0;j<3;j++){
            ctx.beginPath();
            var x=25+j*50;
            var y=25+i*50;
            var radius = 20;
            var startAngle = 0;
            var endAngle = Math.PI+(Math.PI*j)/2
            var anticlockwise = i%2==0?false:true;

            ctx.arc(x, y, radius,startAngle, endAngle, anticlockwise);//圆心(x,y)半径radius，角度startAngle到endAngle，anticlockwise给定方向（顺时针、逆时针）

            if(i>1){
              ctx.fill()
            }else{
              ctx.stroke()
            }
          }
        }
      }else{}
    }
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day2-4</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="150" height="200">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getContext('2d')

        for(var i =0;i<4;i++){
          for(var j=0;j<3;j++){
            ctx.beginPath();
            var x=25+j*50;
            var y=25+i*50;
            var radius = 20;
            var startAngle = 0;
            var endAngle = Math.PI+(Math.PI*j)/2
            var anticlockwise = i%2==0?false:true;

            ctx.arc(x, y, radius,startAngle, endAngle, anticlockwise);//圆心(x,y)半径radius，角度startAngle到endAngle，anticlockwise给定方向（顺时针、逆时针）

            if(i>1){
              ctx.fill()
            }else{
              ctx.stroke()
            }
          }
        }
      }else{}
    }
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day2-5</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="150" height="200">
  </canvas>
  <canvas id="clock" width="150" height="200">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getContext('2d')

        ctx.beginPath();
        ctx.moveTo(75,25);
        ctx.quadraticCurveTo(25,25,25,62.5);
        ctx.quadraticCurveTo(25,100,50,100);
        ctx.quadraticCurveTo(50,120,30,125);
        ctx.quadraticCurveTo(60,120,65,100);
        ctx.quadraticCurveTo(125,100,125,62.5);
        ctx.quadraticCurveTo(125,25,75,25);
        ctx.stroke();
      }else{}

      var canvas2 = document.getElementById('clock')
      if(canvas2.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas2.getContext('2d')

        ctx.beginPath();
        ctx.moveTo(75,40);
        ctx.bezierCurveTo(75,37,70,25,50,25);
        ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
        ctx.bezierCurveTo(20,80,40,102,75,120);
        ctx.bezierCurveTo(110,102,130,80,130,62.5);
        ctx.bezierCurveTo(130,62.5,130,25,100,25)
        ctx.bezierCurveTo(85,25,75,37,75,40)
        ctx.fill()
      }else{}
    }
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day2-6</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="200" height="200">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getContext('2d')

        roundedRect(ctx,12,12,150,150,15)
        roundedRect(ctx,19,19,150,150,9)
        roundedRect(ctx,53,53,49,33,10)
        roundedRect(ctx,53,119,49,16,6)
        roundedRect(ctx,135,53,49,33,10)
        roundedRect(ctx,135,119,25,49,10)

        ctx.beginPath();
        ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false)
        ctx.lineTo(31,37)
        ctx.fill();

        for(var i=0;i<8;i++){
          ctx.fillRect(51+i*16,35,4,4);
        }
        for(i=0;i<6;i++){
          ctx.fillRect(115,51+i*16,4,4)
        }
        for(i=0;i<8;i++){
          ctx.fillRect(51+i*16,99,4,4)
        }

        ctx.beginPath();
        ctx.moveTo(83,116);
        ctx.lineTo(83,102);
        ctx.bezierCurveTo(83,94,89,88,97,88)
        ctx.bezierCurveTo(105,88,111,94,111,102)
        ctx.lineTo(111,116)
        ctx.lineTo(106.333,111.333)
        ctx.lineTo(101.666,116)
        ctx.lineTo(97,111.333)
        ctx.lineTo(92.333,116)
        ctx.lineTo(87.666,111.333)
        ctx.lineTo(83,116)
        ctx.fill()

        ctx.fillStyle = "white"
        ctx.beginPath()
        ctx.moveTo(91,96)
        ctx.bezierCurveTo(88,96,87,99,87,101)
        ctx.bezierCurveTo(87,103,88,106,91,106)
        ctx.bezierCurveTo(94,106,95,103,95,101)
        ctx.bezierCurveTo(95,99,94,96,91,96)
        ctx.moveTo(103,96)
        ctx.bezierCurveTo(100,96,99,99,99,101);
        ctx.bezierCurveTo(99,103,100,106,103,106)
        ctx.bezierCurveTo(106,106,107,103,107,101)
        ctx.bezierCurveTo(107,99,106,96,103,96)
        ctx.fill()

        ctx.fillStyle="black"
        ctx.beginPath();
        ctx.arc(101,102,2,0,Math.PI*2,true);
        ctx.fill()
        ctx.beginPath();
        ctx.arc(89,102,2,0,Math.PI*2,true);
        ctx.fill()
      }else{}
    }
    function roundedRect(ctx,x,y,width,height,radius){
      ctx.beginPath();
      ctx.moveTo(x,y+radius);
      ctx.lineTo(x,y+height-radius);
      ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
      ctx.lineTo(x+width-radius,y+height);
      ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius)
      ctx.lineTo(x+width,y+radius)
      ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
      ctx.lineTo(x+radius,y);
      ctx.quadraticCurveTo(x,y,x,y+radius);
      ctx.stroke();
    }
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>day2-7</title>
  <style type="text/css">
    canvas{border:1px solid black;}
  </style>
</head>
<body onload="draw()">
  <canvas id="tutorial" width="200" height="200">
  </canvas>
  <script type="text/javascript">
    function draw(){
      var canvas = document.getElementById('tutorial')
      if(canvas.getContext){//判断浏览器是否支持getContext属性
        var ctx = canvas.getContext('2d')

        var rectangle=new Path2D();
        rectangle.rect(10,10,50,50)
        var circle = new Path2D()
        circle.moveTo(125,35)
        circle.arc(100,35,25,0,2*Math.PI)
        ctx.stroke(rectangle)
        ctx.fill(circle)
      }else{}
    }
  </script>
</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值