在HTML5中常用的两种绘图元素分别是什么？_随笔

亲爱的提问朋友，html5中常用的两种绘图元素是：Canvas和SVG。

他们都是html5中支持在画布上绘制图形和放入图片的。

Canvas 是H5新出来的标签<canvas></canvas>

Canvas画布，利用JavaScript在网页绘制图像

在标签中给上宽高：<canvas width="800" height="800"></canvas>

SVG 可缩放矢量图形（Scalable Vector Graphics），基于可扩展标记语言XML 出来的时间比较老

SVG 用来定义用于网格的基于矢量的图形。

1、canvas绘制矩形

<!DOCTYPE html>

<html>

<title>canvas绘制矩形</title>

body {

margin: 0

padding: 0

}

</style>

</head>

</body>

</html>

js:

/**

* Created by winson on 2016/9/11.

function draw(id) {

var canvas = document.getElementById(id)//用getElementById获取到canvas对象

var context = canvas.getContext('2d')//取得上下文

context.fillStyle = "green"//绘制背景的颜色

context.strokeStyle = "#fff"//绘制边框的颜色

context.lineWidth = 5//设置画笔宽度

context.fillRect(0, 0, 400, 300)//绘制

context.strokeRect(50, 50, 180, 120)

}

欢迎分享，转载请注明来源：内存溢出

在HTML5中常用的两种绘图元素分别是什么？