zrenderjs绘制二维线条正方形圈圈效果代码-html代码-BFW代码库

zrenderjs绘制二维线条正方形圈圈效果代码

代码语言：html

代码描述：zrenderjs绘制二维线条正方形圈圈效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" ,maximum-scale=1.0,minimum-scale=1.0>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zrender.js"></script>

</head>

<body>

    <div id="container" style="width: 800px; height: 800px;"></div>

    <script>
        //初始化dom对象
        const zrder = zrender.init(document.getElementById('container'));

        //开始绘制

        //绘制矩形
        //实例化矩形对象
        const rect = new zrender.Rect({
            shape: {
                x: 0,
                y: 0,
                height: 50,
                width: 50
            },
            style: {
                fill: 'yellow',
                lineWidth: 2
            }
        })
        //添加矩形对象到zrder上面
        zrder.add(rect)

        //绘制线段
        const line = new zrender.Polyline({
            shape: {
                points: [
                    [80, 80],
                    [190, 120],
                    [300, 200]
                ]
            },
            style: {
                stroke: 'red',
                lineWidth: 2,
            }
        })
        zrder.add(line)

        //更改属性，先创建一个矩形
        const rect2 = new zrender.Rect({
            shape: {
                x: 60,
                y: 100,
.........完整代码请登录后点击上方下载按钮下载查看