【canvas】canvas和svg基本使用

目录

canvas标签特点

获取canvas的“笔”

绘制线段

绘制矩形

绘制圆形

清除画布与绘制文字

svg的基本使用

---

canvas是HTML5的新特性，它允许我们使用canvas元素在网页上通过Javascript绘制图像

canvas标签特点

• <canvas>标签只是一个图形容器，相当于一个画布。
• canvas标签默认的宽度和高度为 300*150
• 浏览器默认canvas是一张图片 
• 给canvas画布添加文本内容是没有任何意义的
• canvas本身没有绘图能力的，所有的绘制工作必须在js中完成
• canvas标签的高度和宽度必须通过canvas标签属性width和height来设置，不能通过样式去设置画布的高度和宽度 

 获取canvas的“笔”

 //canvas任何操作通过js完成
    let canvas = document.querySelector('canvas')
    //获取画布的笔（上下文）
    let ctx = canvas.getContext('2d')
    console.log(ctx)

 绘制线段

  //绘制线段，绘制线段的起点的设置
   ctx.moveTo(100,100)
   //其他点的位置
   ctx.lineTo(100,200)
   ctx.lineTo(200,100)
   //设置图形填充的颜色
   ctx.fillStyle="red"
   ctx.fill()
   //设置线段的颜色和宽度
   ctx.strokeStyle="purple"
   ctx.lineWidth="5"
   //起始点连线，闭合
   ctx.closePath()
   //stroke绘制线段
   ctx.stroke()

 

 绘制出的图形，并不是DOM，只有一个DOM那就是canvas，看到的都是像素点。

绘制矩形

//绘制矩形的第一种方法:(参数为x,y,w,h)
   ctx.strokeRect(100,200,100,200)
   //第二种方法(自带填充颜色，填充颜色可以替换)
   //要在绘制图形之前设置填充颜色
   ctx.fillStyle="skyblue"
   ctx.fill()
   ctx.fillRect(300,200,100,200)

参数：x为到画布左边的距离，y为到画布上边的距离。w为矩形的宽度，h为矩形的高度。

第一种是根据轮廓画出矩形，第二种是可以填充颜色的矩形。 

绘制圆形

    //绘制圆形,开始绘制
    ctx.beginPath()
    //绘制圆形的方法六个参数(x,y,r,起始的弧度，结束的弧度,是否逆时针绘制)
    ctx.arc(100,100,50,0,2*Math.PI,true)
    //设置填充的颜色
    ctx.fillStyle="red"
    ctx.fill()
    //绘制圆形
    ctx.stroke()

//绘制一个弧度
     ctx.beginPath()
     ctx.arc(200,200,50,0,1,true)
     ctx.stroke()

2π=360°

清除画布与绘制文字

//绘制矩形
    ctx.fillRect(100,200,100,200)
    //清除部分画布
    ctx.clearRect(100,200,50,100)
    //设置文字大小
    ctx.font="20px 微软雅黑"
    //绘制文字
    ctx.fillText("数据可视化",50,20)

清除画布的参数：第一个参数是x距离，第二个是y距离，第三个是清除的宽度，第四个是清除的高度。

svg的基本使用

svg是一种基于XML的图像文件格式，它的英文全称为Scalable Vector Graphics,意思是可缩放的矢量图形。

• svg是双闭合标签：默认宽度和高度为300*150 
• svg绘制图形务必在svg标签内部使用绘制

绘制直线 

<svg class="box">
        <!-- x1 y1 x2 y2分别是第一个点和第二个点的坐标 -->
          <line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
</svg>

绘制折线（可以多个点，多个点的时候，最好带有逗号）

<polyline points="300 300,50 100,120 400,20 20" fill-opacity="1" stroke="red"></polyline>

绘制矩形

fill属性：设置填充颜色的  fill-opacity：设置填充颜色的透明度  stroke：线的颜色

<rect x="400" y="400" width="150" height="50" fill="pink"></rect>

绘制圆形

<circle cx="330" cy="95" r="50" style="stroke:black;fill:none"></circle>