Echarts3.0入门之浏览器画图原理_echarts绘图原理-优快云博客

本文链接：https://blog.youkuaiyun.com/zjsfdx/article/details/80202572

Canvas
基于像素
单个html，类似于画笔在画布上画画
Echarts基于canvas画图
Svg
基于对象模型
多个图形元素
高保真

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
    <!--添加canvas标签，并加上红色边框以便于在页面上查看-->
    <canvas id="myCanvas" width="400px" height="300px">
    您的浏览器不支持canvas标签。
    </canvas>
</body>
</html>

<script>
    // 获取canvas对象(画布)
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    // 开始一个新的绘制路径
    ctx.beginPath();
    // 设置弧线的颜色为蓝色
    ctx.strokeStyle = "blue";
    var circle = {
        x : 100,        //  圆心的x轴坐标值
        y : 100,        //  圆心的y轴坐标值
        r : 50          //  圆的半径
    };
    // 沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
    ctx.arc(circle.x,circle.y,circle.r,0,Math.PI * 2,false);
    // 按照指定的路径绘制弧线
    ctx.stroke();
</script>

这里写图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>svg</title>
</head>

<body>
    <svg width="100%" height="100%" version="1.1"
    xmlns="http://www.wrg/2000/svg">
        <!--circle是圆形标签-->
        <circle cx="70" cy="50" r="40" stroke="black" stroke-width="2" fill="red">

        </circle>
        <!--rect是长方形标签-->
        <rect x='120' width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"></rect>
    </svg>
</body>
</html>

这里写图片描述