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 >

绘制一个矩形

绘制圆形

绘制直线

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

绘制折线

绘制路径

svg 和 canvas

相关推荐