简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > H5 Tutorial > body text

Two method codes for canvas drawing rectangle and svg drawing rectangle

不言
Release： 2018-08-08 11:28:25
Original
1966 people have browsed it

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(&#39;2d&#39;);//获得笔刷
   con.fillStyle="red";//设置填充颜色
   con.strokeStyle="blue";//设置线条颜色
   con.fillRect(10,10,100,100);//填充画矩形
   con.strokeRect(100,100,200,200);//线条画矩形

</script>
</body>
</html>
Copy after login

2.svg draws a rectangle

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="300" height="100"></rect>    
        </svg>
Copy after login

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!

Related labels：
canvas画矩形和svg画矩形
source：php.cn
Previous article：Example of converting jpg image into svg text path animation (with code) Next article：How to set the width and height of the video in the video tag in html5
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Hide and show animated content: Create HTML pages with transition effects I'm trying to make a website that displays content in book form, with page-turning animati...
From 2023-09-10 17:41:45
0
1
287
How to center align three SVG files on the page? I have three separate SVG files that when layered on top of each other create a graphic. T...
From 2023-09-07 14:20:58
0
2
239
CSS drop cap image, text aligned in white space I don't think this is an everyday dropcap situation. My capital "S" is an image ...
From 2023-09-05 21:42:04
0
2
230
ios - iphone When using UIGraphicsGetCurrentContext in drawRect to draw a rectangle, is there an excess of 1 pixel outside the border? The code is as follows {Code...} In the demo of the blank project, everything is ok. Howev...
From 2017-05-16 13:18:51
0
1
717
PHP画图问题 这种不规则的图形要怎么画呢，图片的函数就支持画圆、矩形、线。不过遇到这种不规则的图片就不知道怎么办了
From 2017-05-16 12:58:27
0
1
217
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！