码迷,mamicode.com
首页 > 其他好文 > 详细

svg 和 canvas

时间:2019-12-27 13:31:58      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:text   print   图片   样式   begin   title   close   comm   多边形   

一:定义

什么是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

标签:text   print   图片   样式   begin   title   close   comm   多边形   

原文地址:https://www.cnblogs.com/jiangquhan/p/12106582.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!