This article brings you the code for two methods of drawing a rectangle on canvas and drawing a rectangle on svg. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1.Canvas draws a rectangle
<!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 draws a rectangle
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100"></rect>
</svg>rect represents a rectangle;
The width and height attributes of the rect element can define a rectangle The height and width of The stroke-opacity attribute defines the transparency of the border color (the legal range is: 0 - 1);
The opacity attribute of CSS defines the opacity of the entire element (the legal range is: 0 - 1);
If you want to rotate in svg, you can use transform='rotate(45)
Recommended related articles:
Example of converting jpg image into svg text path animation (with code) SVG drawing function: svg realizes drawing a flower (with code)The above is the detailed content of Two method codes for canvas drawing rectangle and svg drawing rectangle. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
