贵阳网站制作 建设,南阳网站托管,北京网站设计公司排行,做纯静态网站怎么样HTML图形 1. HTML5 Canvas2.HTML5 内联 SVG3.HTML 5 Canvas vs. SVG 1. HTML5 Canvas HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域#xff0c;您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 1、创建… HTML图形 1. HTML5 Canvas2.HTML5 内联 SVG3.HTML 5 Canvas vs. SVG 1. HTML5 Canvas HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 1、创建使用 Canvas 元素 向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度 canvas idmyCanvas width200 height100/canvascanvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成 canvas idmyCanvas width200 height100/canvas script typetext/javascript// 使用 document.getElementById() 获取一个在 HTML 中 id 为 myCanvas 的 canvas 元素var cdocument.getElementById(myCanvas);// 调用 getContext(2d) 方法获取这个 canvas 的 2D 绘图环境var cxtc.getContext(2d);// fillStyle 属性用来设置将要绘制的形状或图形的填充颜色此处为红色cxt.fillStyle#FF0000;// fillRect(x, y, width, height) 方法在画布上绘制一个填充的矩形。// 参数 (0, 0) 表示矩形的左上角起始位置在画布的左上角即坐标 (0, 0)// 150 是矩形的宽度75 是矩形的高度cxt.fillRect(0,0,150,75); /script2、更多 Canvas 实例 1️⃣实例 - 线条 canvas idmyCanvas width200 height100/canvas script typetext/javascriptvar cdocument.getElementById(myCanvas);var cxtc.getContext(2d);cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke(); /script2️⃣实例 - 圆形 script typetext/javascriptvar cdocument.getElementById(myCanvas);var cxtc.getContext(2d);cxt.fillStyle#FF0000;cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill(); /script3️⃣实例 - 渐变 script typetext/javascriptvar cdocument.getElementById(myCanvas);var cxtc.getContext(2d);var grdcxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,#FF0000);grd.addColorStop(1,#00FF00);cxt.fillStylegrd;cxt.fillRect(0,0,175,50); /script2.HTML5 内联 SVG SVG是一种基于 XML 的矢量图形格式用于描述二维图形。它的主要特点是可缩放图像在不同分辨率下不会失真适合在网页上呈现高质量的图形和图表。SVG 支持图形元素如路径、矩形、圆形、文本等、样式、交互如点击事件和动画广泛用于网页开发、数据可视化、图标等场景。 在 HTML5 中可以将 SVG 元素直接嵌入 HTML 页面中 !DOCTYPE html html bodysvg xmlnshttp://www.w3.org/2000/svg version1.1 height190polygon points100,10 40,180 190,60 10,60 160,180stylefill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd; / /svg/body /html3.HTML 5 Canvas vs. SVG Canvas 和 SVG 都允许您在浏览器中创建图形但是它们在根本上是不同的 Canvas 依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏其中的许多对象会被频繁重绘 SVG 不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序比如谷歌地图复杂度高会减慢渲染速度任何过度使用 DOM 的应用都不快不适合游戏应用