svg 和 canvas

Posted jiangquhan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了svg 和 canvas相关的知识,希望对你有一定的参考价值。

一:定义

什么是canvas

canvas画布,使用js在网页上绘制图像

 

什么是svg
svg是可伸缩矢量图

二:使用

canvas使用

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    cxt.stroke();
    c.addEventListener("mousedown", function(event){
        alert("hh")
    });
</script>

浏览器DOM展示

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>

注意:

1.canvas通过js在画布上画了连线,但是浏览器中没有展示连线DOM

2.由于不是以DOM形式展示,canvas是一个整体,不能给画上图形添加事件,只能给canvas整体添加事件

svg使用
<!DOCTYPE html>
<html>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" @click="svgClick">
      <polygon points="100,10 40,180 190,60 10,60 160,180" @click="domClick"
      style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
    </svg>
</body>
</html>


//绘制矩形

context.fillStyle="#FF0000"; //设置填充样式

context.strokeStyle="rgb(0,165,255)"; //设置轮廓样式

context.lineWidth=4; //设置绘制线宽

context.rect(0,0,150,75); //创建矩形形状  (x,y,width,height)context.fill(); //填充矩形

context.stroke(); //绘制矩形轮廓

 

填充三角形

context.beginPath(); //新建一条路径
context.moveTo(25,25); //将笔触移动到指定的坐标
context.lineTo(105,25); //创建到指定坐标的直线
context.lineTo(25,105);
context.fill();

/*描边三角形*/
context.beginPath();
context.moveTo(125,125);
context.lineTo(125,45);
context.lineTo(45,125);
context.closePath(); //闭合路径
context.stroke();

绘制图像方法共有三种:

context.drawImage(image, x, y);
//x 和 y 是其在目标 canvas 里的起始坐标

context.drawImage(image, x, y, width, height);
//width 和 height,这两个参数用来控制 当像canvas画入时应该缩放的大小

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

 

另外还可以通过clip()方法对图片进行裁剪:context.beginPath();

    context.arc(100,150,50,0,2*Math.PI);//将图片剪辑一个圆形
    context.clip();
    context.drawImage(img,0,0);

svg使用方法

  矩形 < rect >
  圆形 < circle >
  椭圆 < ellipse >
  线 < line >
  折线 < polyline >
  多边形 < polygon >
  路径 < path >
  文本 < text >

绘制一个矩形

<rect x="50" y="20" rx="20" ry="20" width="150" height="100" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>

绘制圆形


绘制直线

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/> //x1,y1为起始点坐标,x2,y2为终点坐标

绘制折线

<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>

绘制路径

<path d="M150 0 L75 200 L225 200 " />

以上是关于svg 和 canvas的主要内容,如果未能解决你的问题,请参考以下文章

svg好还是canvas好

使用svg和canvas实现图片的剪切

怎么用canvas和svg画动态的折线图

svg图转canvas,完全阔以的

Canvas和Svg有啥区别?

Fabric.js 合并多个 Canvas JSON(或)SVG