canvas画矩形和svg画矩形的两种方法代码

时间2024-01-23 15:17:20发布访客分类HTML浏览1058

导读：收集整理的这篇文章主要介绍了canvas画矩形和svg画矩形的两种方法代码，觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章给大家带来的内容是关于canvas画矩形和svg画矩形的两种方法代码，有一定的参考价值，有需要的朋友可以参考...

收集整理的这篇文章主要介绍了canvas画矩形和svg画矩形的两种方法代码，觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章给大家带来的内容是关于canvas画矩形和svg画矩形的两种方法代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1.canvas画矩形

!doctyPE htML>
    html>
    head>
    !--canvas画矩形-->
    style>
#huaban{
    border:1px solid;
}
    /style>
    script>
    /script>
    meta charset="UTF-8">
    /head>
    body>
    canvas width="200" height="200" id="huaban">
    /canvas>
    script>
    VAR can=document.getElementById("huaban");
    //获得画板数据var con=can.getContext('2d');
    //获得笔刷   con.fillStyle="red";
    //设置填充颜色   con.strokeStyle="blue";
    //设置线条颜色   con.fillRect(10,10,100,100);
    //填充画矩形   con.strokeRect(100,100,200,200);
    //线条画矩形/script>
    /body>
    /html>

2.svg画矩形

svg XMlns="http://www.w3.org/2000/svg" version="1.1">
            rect width="300" height="100">
    /rect>
                /svg>

rect 代表矩形；

rect 元素的 width 和 height 属性可定义矩形的高度和宽度；

圆角矩形：

svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            rect width="300" height="100" style="fill:deepskyblue;
    stroke-width:2;
    stroke:rgb(0,0,0);
    fill-opacITy:0.5;
    stroke-opacity:0.9;
    opacity:0.5;
    " x="0" y="20" rx="20" ry="20">
    /rect>
                /svg>

CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）；

CSS 的 stroke-opacity 属性定义边框颜色的透明度（合法的范围是：0 - 1）；

CSS 的 opacity 属性定义整个元素的不透明度（合法的范围是：0 - 1）；

svg中旋转的话可以用transform='rotate(45)