HTML5의 어떤 요소가 그래픽을 그릴 수 있나요?

HTML5에서 그래픽을 그릴 수 있는 요소: 1. JavaScript 스크립트를 통해 동적으로 그래픽을 그릴 수 있는 "캔버스" 요소 2. XML 형식을 사용하여 그래픽을 정의하는 네트워크용 벡터 기반 그래픽을 정의할 수 있는 "SVG" 요소 .

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML5 Canvas와 SVG는 모두 브라우저에서 그래픽을 생성할 수 있지만 근본적으로 다릅니다.

SVG

• SVG는 XML을 사용하여 2D 그래픽을 설명하는 언어입니다.

• SVG는 XML을 기반으로 하며 이는 SVG DOM의 모든 요소를 ​​사용할 수 있음을 의미합니다. JavaScript 이벤트 핸들러를 요소에 연결할 수 있습니다.

• SVG에서는 그려진 모든 모양이 개체로 간주됩니다. SVG 객체의 속성이 변경되면 브라우저는 자동으로 그래픽을 재현할 수 있습니다.

Canvas

• Canvas는 JavaScript를 통해 2D 그래픽을 그립니다.

• 캔버스는 픽셀 단위로 렌더링됩니다.

• 캔버스에서는 그래픽이 그려지면 더 이상 브라우저의 관심을 받지 못합니다. 위치가 변경되면 그래픽으로 가려졌을 수 있는 개체를 포함하여 전체 장면을 다시 그려야 합니다.

1. Canvas

canvas는 HTML5의 새로운 HTML5 태그이자 캔버스 운용을 위한 자바스크립트 API로, 웹페이지에서 동적인 2D, 3D 이미지 기술을 구현할 수 있습니다. 마크업과 SVG 및 VML의 중요한 차이점은 에는 JavaScript 기반 그리기 API가 있는 반면 SVG와 VML은 XML 문서를 사용하여 그리기를 설명한다는 것입니다. SVG 그림은 편집 및 생성이 쉽지만 성능이 훨씬 떨어집니다.

캔버스는 원래 Flash가 필요했던 애니메이션, 게임, 차트, 이미지 처리 및 기타 기능을 완성할 수 있습니다.

1. 캔버스 만들기

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

HTML에서 너비와 높이를 설정하는 것이 가장 좋습니다. 다른 방법으로 너비와 높이를 설정하면 변위 차이가 0.5가 됩니다.

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

2. 그리기

//绘制线条

//设置线宽
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="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" alt="HTML5의 어떤 요소가 그래픽을 그릴 수 있나요?" >
//在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坐标

3. 일부 캔버스 방법 이해하기

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点旋转

2.SVG

SVG Scalable Vector Graphics는 XML(Extensible Markup Language)을 기반으로 합니다. 2차원 벡터 그래픽 형식입니다. SVG는 2000년 8월 W3C("World Wide Web ConSortium" 또는 "International Internet Standards Organization")에서 공식화한 새로운 2차원 벡터 그래픽 형식입니다. 또한 사양의 네트워크 벡터 그래픽 표준이기도 합니다. SVG는 XML 구문을 엄격하게 따르며 텍스트 형식의 설명 언어를 사용하여 이미지 내용을 설명합니다. 따라서 이미지 해상도와 무관한 벡터 그래픽 형식입니다. SVG는 2003년 1월 14일에 W3C 권장 사항이 되었습니다.

특징:

1. 모든 크기 조정

사용자는 이미지의 선명도, 세부 사항 등을 손상시키지 않고 임의로 이미지 표시 크기를 조정할 수 있습니다.

2. 텍스트는 독립적입니다.

SVG 이미지의 텍스트는 이미지와 독립적이며 텍스트는 편집 및 검색이 가능합니다. 더 이상 글꼴 제한이 없습니다. 사용자 시스템에 특정 글꼴이 설치되어 있지 않더라도 글꼴을 만들었을 때와 똑같은 화면이 표시됩니다.

3. 더 작은 파일

일반적으로 SVG 파일은 GIF 및 JPEG 형식보다 크기가 훨씬 작아서 빠르게 다운로드됩니다.

4. 슈퍼 디스플레이 효과

SVG 이미지는 항상 화면의 가장자리가 선명하며 모든 화면 해상도 및 인쇄 해상도에 적합합니다.

5. 슈퍼 색상 제어

SVG 이미지는 ICC 색상 프로필 표준, RGB, 라인 X 채우기, 그라데이션 및 마스크를 지원하는 1,600만 색상 팔레트를 제공합니다.

6. 상호작용과 지능. SVG가 직면한 주요 문제 중 하나는 이미 중요한 시장 점유율을 차지하고 있는 벡터 그래픽 형식인 Flash와 경쟁하는 방법입니다. 또 다른 문제는 로컬 운영 환경에서 SVG에 대한 제조업체의 지원 정도입니다.

브라우저 지원:

Internet Explorer9, Firefox, Google Chrome, Opera 및 Safari는 모두 SVG를 지원합니다.
IE8 및 이전 버전에는 무료로 제공되는 Adobe SVG 브라우저와 같은 플러그인이 필요합니다.

1. 도입 방법

방법 1:

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

• xmlns: 네임스페이스

• version: 버전

방법 2:

<img src="/static/imghwm/default1.png"  data-src="01.svg"  class="lazy"   alt="">

2.

<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>

관련 추천: 《 html 동영상 튜토리얼》

위 내용은 HTML5의 어떤 요소가 그래픽을 그릴 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!