Canvas和SVG

最新推荐文章于 2024-05-08 19:57:02 发布

青春如我

最新推荐文章于 2024-05-08 19:57:02 发布

阅读量201

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_38338069/article/details/84999339

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

区别

总结Canvas和SVG的区别

1.SVG小练习

画一条线
画一个矩形
画一个圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>实线：</p>
<svg xmlns="http://www.w3.org/1999/xhtml" version="1.1">
    <line x1="0" y1="0" x2="300" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"></line>
</svg>
<p>矩形</p>
<svg xmlns="http://www.w3.org/1999/xhtml" version="1.1">
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:2;stroke:rgb(0,255,0)"></rect>
</svg>
<p>圆形</p>
<svg WIDTH="400" HEIGHT="400">
    <circle cx="200" cy="200" r="40" stroke="black" stroke-width="2" fill="red"></circle>
</svg>
<script>

</script>
</body>
</html>

效果:

在这里插入图片描述

画一朵花

flower.svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <circle cx="90" cy="90" r="30" fill="red" />

    <circle cx="150" cy="90" r="30" fill="yellow" />
    <circle cx="120" cy="60" r="30" fill="blue" />
    <circle cx="120" cy="120" r="30" fill="green" />
    <!--中心圆-->
    <circle cx="120" cy="90" r="15" fill="pink"/>


    <line x1="120" y1="150" x2="120" y2="250"
          style="stroke:rgb(100,55,69);stroke-width:2"/>

    <ellipse cx="90" cy="190" rx="30" ry="10"
             style="fill:lime"/>
    <ellipse cx="150" cy="225" rx="30" ry="10"
             style="fill:lime"/>
</svg>

flower.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe src="flower.svg" width="100%" height="600" style="padding: 5px">
</iframe>
</body>
</html>

效果:

在这里插入图片描述

2.Canvas练习

画一个矩形
画线
画圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    /*
    * fillStyle 默认设置是#000000（黑色）。
    * fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
    * */
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);

    /*
    * moveTo(x,y) 定义线条开始坐标
    * lineTo(x,y) 定义线条结束坐标
    */
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();

    ctx.beginPath();
    //arc(x,y,r,start,stop)
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
</script>
</body>
</html>

效果：

在这里插入图片描述
文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    /*
    * font - 定义字体
    * fillText(text,x,y) - 在 canvas 上绘制实心的文本
    * strokeText(text,x,y) - 在 canvas 上绘制空心的文本
    * */
    ctx.font="30px Arial";
    ctx.fillText("Hello World!",10,50);
    ctx.font="30px Arial";
    ctx.strokeText("Hello Code!",40,80);

</script>
</body>
</html>