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);


下面用canvas画一个吃豆人使用定时器来完成动画效果

上代码

 1 <body>
 2     <canvas id="c1" width="600px" height="600px" style="background-color: #DDD"></canvas>
 3 
 4     <script type="text/javascript">
 5         //选中画布
 6         var c1 = document.getElementById("c1")
 7             //选择画布对象
 8         var ctx = c1.getContext("2d")
 9             //闭嘴的样子
10         var closeMouth = function() {
11                 ctx.beginPath()
12                 ctx.arc(300, 300, 200, 0, 2 * Math.PI)
13                 ctx.strokeStyle = "black"
14                 ctx.lineTo(300, 300)
15                 ctx.stroke()
16                 ctx.fillStyle = "#0f0"
17                     //画眼睛
18                 ctx.beginPath()
19                 ctx.arc(370, 240, 50, 0, 2 * Math.PI)
20                 ctx.fillStyle = "blue"
21                 ctx.fill()
22                     //画眼珠
23                 ctx.beginPath()
24                 ctx.arc(373, 225, 6, 0, 2 * Math.PI)
25                 ctx.fillStyle = "#fff"
26                 ctx.fill()
27             }
28             //========================
29             //张嘴的样子
30         var openMouth = function() {
31             //画大脸
32             ctx.beginPath()
33             ctx.strokeStyle = "black"
34             ctx.arc(300, 300, 200, 1 / 4 * (Math.PI), 7 / 4 * Math.PI)
35             ctx.lineTo(300, 300)
36             ctx.closePath()
37             ctx.stroke()
38             ctx.fillStyle = "#0f0"
39                 //画个眼睛
40             ctx.beginPath()
41             ctx.fillStyle = "blue"
42             ctx.arc(320, 200, 50, 0, 2 * Math.PI)
43             ctx.fill()
44                 //画眼珠
45             ctx.beginPath()
46             ctx.arc(323, 185, 6, 0, 2 * Math.PI)
47             ctx.fillStyle = "#fff"
48             ctx.fill()
49         }
50         var x = 1;
51         //定时器切换
52         setInterval(
53             function() {
54                 x++
55                 if (x % 2 == 0) {
56                     ctx.clearRect(0, 0, 600, 600)
57                     closeMouth()
58                 } else {
59                     ctx.clearRect(0, 0, 600, 600)
60                     openMouth()
61                 }
62             }, 1000
63         )
64     </script>
65 </body>

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画一个信封

<style type="text/css">
     body{
            text-align: center;
        }
     svg{
         /*背景颜色设置为白色*/
         background-color: #fff;
         margin:100px auto
     }

   </style>
<body>
<!-- 多边形 -->
<svg width="600" height="600">
<polygon points ="0,0 300,400 600,0"></polygon>
<polygon points ="0,50 0,600 300,600"></polygon>
<polygon points ="600,50  300,600  600,600 "></polygon>
</svg>
</body>

posted @ 2019-12-27 12:00 石舟丿阅读(259) 评论(0) 收藏举报

刷新页面返回顶部

石舟丿

svg 和 canvas

公告