Which element in HTML5 can draw graphics-Front-end Q&A-php.cn

Elements in HTML5 that can draw graphics: 1. "canvas" element, which can dynamically draw graphics through JavaScript scripts; 2. "SVG" element, which can define vector-based graphics for the web, using XML Format defines graphics.

Which element in HTML5 can draw graphics

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

HTML5 Canvas and SVG both allow you to create graphics in the browser, but they are fundamentally different.

SVG

SVG is a language that uses XML to describe 2D graphics.
SVG is based on XML, which means every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.
In SVG, each drawn shape is considered an object. If the properties of an SVG object change, the browser can automatically reproduce the graphic.

Canvas

Canvas uses JavaScript to draw 2D graphics.
Canvas is rendered pixel by pixel.
In canvas, once a graphic is drawn, it will no longer receive the browser's attention. If its position changes, the entire scene needs to be redrawn, including any objects that may have been covered by graphics.

1. Canvas

canvas is a new HTML5 tag in HTML5 and a javascript API for operating canvas. It can realize dynamic 2D and 3D images in web pages. technology. An important difference between the

Canvas can complete animation, games, charts, image processing and other functions that originally required Flash.

1. Create canvas

<canvas  id="draw" width="600" height="600"></canvas>

Copy after login

Create a canvas tag in HTML. It is best to set the width and height in the tag itself. If you set the width and height in other ways, it will There is a displacement difference of 0.5

var draw=document.getElementById("draw");
//获取画布元素
var draws=draw.getContext("2d");
//给画布一个绘制环境，2d表示在2d环境下绘制
//draws返回的是一个对象

Copy after login

2. Draw

//绘制线条

//设置线宽
draws.lineWidth = 10;
//设置线的颜色
draws.strokeStyle = "blue";
            
draws.moveTo(0,0);  //移动画笔到0,0点
draws.lineTo(300,300);  //画线到300,300的位置
draws.stroke();  //执行描边

//绘制矩形
draws.strokeRect(x,y,width,height) //绘制一个边框矩形
draws.fillRect(x,y,width,height) //绘制一个填充矩形

draws.clearRect(x,y,width,height) //清除一个矩形


//绘制圆形
draws.arc(x,y,radius,startAngle,endAngle,anticlockwise)
//arc方法用来绘制一段圆弧路径，以(x,y)圆心位置radius为半径、startAngle为起始弧度、
//endAngle为终止弧度来，而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定，
//如果为 true 就是逆时针，false 则为顺时针，Math.PI * 2 刚好为一周。

//绘制图像 
//在html中加入一个img标签 
<img src="1.jpg" id="pic"/>
//在JS中...
//需要将页面中的图片都加载完之后执行
window.onload=function(){



//绘制文字

//描边文字
draws.font="50px microsoft yahei"

//设置描边字体颜色
draws.strokeText("Hello",20,100) 

//设置描边文字内容，和X坐标Y坐标

//填充文字

draws.fillStyle="red"
//设置填充字体颜色
draws.fillText("Hello",20,200); 

//设置填充文字内容，和X坐标Y坐标

Copy after login

3. Understand some canvas methods

draws.beginpath()
draws.closepath()
// 二者同时出现  将绘制路径闭合 ,自动将路径闭合


draws.save()
draws.restore()
//二者成对出现 中间的属性样式只影响内部 不影响外部


//translate()
draws.strokeRect(0, 0, 150, 150);

draws.translate(150, 150);

draws.strokeRect(0, 0, 150, 150); //被平移的元素
//平移后这个被平移的元素的坐标就会改变


//rotate()

draws.rotate(0.2);

draws.strokeRect(75, 75, 75, 75); //根据画布的0，0点旋转

Copy after login

2. SVG

SVG Scalable Vector Graphics (Scalable Vector Graphics) is a graphics format based on Extensible Markup Language (XML) for describing two-dimensional vector graphics. SVG is a new two-dimensional vector graphics format formulated by W3C ("World Wide Web ConSortium" or "International Internet Standards Organization") in August 2000. It is also the network vector graphics standard in the specification. SVG strictly follows XML syntax and uses a descriptive language in text format to describe image content. Therefore, it is a vector graphics format that is independent of image resolution. SVG became a W3C Recommendation on January 14, 2003.

Features:

1. Any scaling

Users can scale the image display arbitrarily without destroying the clarity, details, etc. of the image.

2. Text independence

The text in the SVG image is independent of the image, and the text remains editable and searchable. There will no longer be font restrictions. Even if a certain font is not installed on the user's system, they will see exactly the same screen as when they created it.

3. Smaller files

Generally speaking, SVG files are much smaller than those in GIF and JPEG formats, so they download quickly.

4. Super display effect

SVG images always have clear edges on the screen, and its clarity is suitable for any screen resolution and printing resolution.

5. Super color control

SVG images provide a palette of 16 million colors, supporting ICC color profile standards, RGB, line X fill, gradient and mask.

6. Interaction and intelligence. One of the main problems facing SVG is how to compete with Flash, a vector graphics format that already occupies an important market share. The other problem is the degree of manufacturer support for SVG in its local operating environment.

Browser support:

Internet Explorer9, Firefox, Google Chrome, Opera and Safari all support SVG.
IE8 and earlier versions require a plug-in - such as Adobe SVG Browser, which is available for free.

1. Introduction method

Method 1:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
绘制图形
</svg>

Copy after login

xmlns: namespace
version：Version

Method 2:

<img src="01.svg" alt="">

Copy after login

2. Draw

<svg>

//绘制直线

 <line x1="0" y1="0" x2="500" y2="500" style="stroke:rgb(0,0,255);stroke-width:3"></line>

//参数：
//x1 属性在 x 轴定义线条的开始
//y1 属性在 y 轴定义线条的开始
//x2 属性在 x 轴定义线条的结束
//y2 属性在 y 轴定义线条的结束

//绘制圆形、椭圆

<circle r="50" cx="110" cy="60" fill="lightskyblue"></circle>

<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:dodgerblue;stroke-width:5"><ellipse/>

//参数
//CX属性定义的椭圆中心的x坐标
//CY属性定义的椭圆中心的y坐标
//RX属性定义的水平半径
//RY属性定义的垂直半径

//绘制文本

<text x="0" y="50" fill="blue" style="font-size:30px; font-family: &#39;microsoft yahei&#39;;">My Text</text>


//绘制矩形

 <rect x="40" y="60" width="260" height="260" style="fill:blue;stroke:pink;stroke-width:5;

//绘制图像

<image x="20" y="20" width="100" height="80" xlink:href="./img/1.jpg"></image>

//绘制路径 

<path d="M70 0 L100 150 L40 150 Z" stroke="plum" fill="plum" ></path>

//参数
//M是起点坐标 L是相邻点坐标 Z让路径构成闭合回路
//H代表水平的线条 默认y轴上的值一样
//V 代表垂直的线条 默认x轴上的值一样/
//A 后面跟七个值

//绘制多边形

<Polygon points=””></polygon>

//points：多边形的点

//绘制折线

<polyline points=”” ></polyline>

//points：折线的点
 
</svg>

Copy after login

Related recommendations:《html video tutorial》

The above is the detailed content of Which element in HTML5 can draw graphics. For more information, please follow other related articles on the PHP Chinese website!