导航：首页 > 开发技术 >

HTML5中怎么绘制图形

发表于：2026-11-03 作者：千家信息网编辑

千家信息网最后更新 2026年11月03日，本篇内容主要讲解"HTML5中怎么绘制图形"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"HTML5中怎么绘制图形"吧!HTML5中可以绘制图形的元素：1、

千家信息网最后更新 2026年11月03日HTML5中怎么绘制图形

本篇内容主要讲解"HTML5中怎么绘制图形"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"HTML5中怎么绘制图形"吧!

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

本教程操作环境：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可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。

1、创建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标签 //在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的本地运行环境下的厂家支持程度。