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

最新推荐文章于 2024-04-08 16:42:45 发布

??or??

最新推荐文章于 2024-04-08 16:42:45 发布

阅读量332

点赞数

分类专栏： canvas 文章标签： canvas web开发

本文链接：https://blog.csdn.net/zhangyr_student/article/details/102862172

版权

本文是关于canvas学习的第二部分，主要介绍了canvas绘制路径的相关函数，如beginPath(), closePath(), stroke(), fill()等，并讲解了arc(), arcTo(), quadraticCurveTo(), bezierCurveTo()等用于创建复杂形状的方法。此外，还提到了Path2D对象的使用，包括从SVG导入路径。文章详细阐述了绘制路径的步骤，帮助读者掌握在canvas中绘制图形的基本流程。" 128439064,10035150,智慧应急指挥平台融合通信与可视化建设,"['大数据', '应急指挥', '融合通信', '可视化调度', '移动应急']

摘要由CSDN通过智能技术生成

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 ch

最低0.47元/天解锁文章

??or??

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas学习笔记（二）----绘制路径

1.会使用的函数1）beginPath()新建一条路径，生成后，图形绘制命令被指向路径上生成路径2）closePath()闭合路径后图形绘制命令重新指向到上下文3）stroke()通过线条来绘制图形轮廓4）fill()通过填充路径的内容区域生成实心的图形5）arc(x,y,radius,startAngle,endAngle,anticlockwise)以（x，y）为圆心以ra...
复制链接

扫一扫

专栏目录