站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

HTML5中哪个元素可以绘制图形

时间:2021-12-20 [网络编程]作者:fabuyuan 浏览:7 次

HTML5中可以绘制图形的元素:1、“canvas”元素,可通过JavaScript脚本来动态绘制图形;2、“SVG”元素,可定义用于网络的基于矢量的图形,使用XML格式定义图形。

HTML5中哪个元素可以绘制图形

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

HTML5 Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的。

SVG

  • SVG 是一种使用 XML 描述 2D 图形的语言。

  • SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

  • 在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

Canvas

  • Canvas 通过 JavaScript 来绘制 2D 图形。

  • Canvas 是逐像素进行渲染的。

  • 在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

一、Canvas

canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术。<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成,但功能明显要弱一些。

canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。

1、创建canvas

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

 在html中创建一个canvas标签,最好再在标签本身中设置宽高,如果用其他方式设置宽高会有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=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坐标

3、理解一些canvas方法

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

二、SVG

SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C("World Wide Web ConSortium" 即 " 国际互联网标准组织")在2000年8月制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。

特点:

1、任意放缩

用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等。

2、文本独立

SVG图像中的文字独立于图像,文字保留可编辑和可搜寻的状态。也不会再有字体的限制,用户系统即使没有安装某一字体,也会看到和他们制作时完全相同的画面。

3、较小文件

总体来讲,SVG文件比那些GIF和JPEG格式的文件要小很多,因而下载也很快。

4、超强显示效果

SVG图像在屏幕上总是边缘清晰,它的清晰度适合任何屏幕分辨率和打印分辨率。

5、超级颜色控制

SVG图像提供一个1600万种颜色的调色板,支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。

6、交互X和智能化。SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题,另一个问题就是SVG的本地运行环境下的厂家支持程度。

浏览器支持:

Internet Explorer9,火狐,谷歌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=01.svg alt="">

2、绘制

<svg>

//绘制直线

 <line x1="0" y1="0" x2="500" y2="500" ></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" ><ellipse/>

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

//绘制文本

<text x="0" y="50" fill="blue" >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中哪个元素可以绘制图形的详细内容,更多请关注站长家园其它相关文章!

本文标签:  HTML5绘制图形CanvasSVG

转载请注明来源:HTML5中哪个元素可以绘制图形

本文永久链接地址:https://www.adminjie.com/post/6677.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 十分钟教你使用css实现烟雾效果

      十分钟教你使用css实现烟雾效果

      本篇文章给大家分享怎样利用css实现烟雾的效果,希望对大家有帮助。仔细观察烟雾效果,有两个比较重要的特点:模糊效果颗粒感首先看模糊效果,想到模糊,大部分同学首先...

    • 总结分享十个Linux环境下的替代工具

      总结分享十个Linux环境下的替代工具

      本篇文章给大家带来了linux操作系统下替代工具的相关知识,其中包括linux中安装和使用bat命令,希望对大家有帮助。在Linux操作系统下,我们经常使用...

    • 快来看一看你的git学的怎么样了(整理总结)

      快来看一看你的git学的怎么样了(整理总结)

      本篇文章给大家总结了git的相关知识,其中包括commit规范与提交验证、误操作的撤回方案和Tag与生产环境等,希望对大家有帮助。本文从前端工程,团队协作,生...

    • Docker总结分享之数据卷技术

      Docker总结分享之数据卷技术

      本篇文章给大家带来了Docker总结分享之数据卷技术的相关知识,希望对大家有帮助。Docker数据卷技术什么是容器数据卷docker的理念回顾将应和环境打包成一...

    • oracle如何修改列的值

      oracle如何修改列的值

      在oracle中,可以使用“update”命令来修改列的值,该语句可以用来修改、更新一个或多个表的数据,语法为“update表名set列名1=值1,列名2...

  • 买服务器送会员
  • 热门文章
  • 买服务器送会员