Canvas

  1. 什么是canvas:

　　HTML5 的 canvas 元素是使用 JavaScript 在网页上绘制图像，canvas 元素本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成。它会在网页中绘制一个画布，画布是一个矩形区域，你可以控制到画布的每一个像素，绘制各种图像。它提供多种绘制路径、矩形、圆形、字符以及添加图像的方法。

　　2.Canvas的用法:

　　1) 创建 Canvas 元素

　　　　在 HTML5 页面添加 canvas 元素，规定元素的 id、宽度和高度；（canvas的样式要写在行内样式中,否则不会生效）

<canvas id="myCanvas" width="200" height="100"></canvas>

　　2) 如何通过 JavaScript 来绘制:

　　　　eg:通过js获取canvas元素 ,getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，可以理解为绘图工具。创建绘图工具(ctx),通过绘图工具在画布中绘制矩形,并在绘制前为其添加填充样式:

<script type="text/javascript">

     var c=document.getElementById("myCanvas");

    var cxt=c.getContext("2d");

    cxt.fillStyle="#FF0000";

    cxt.fillRect(0,0,150,75);

</script>

　　3）绘制的坐标:

Canvas绘制图像的参考原点为左上角。也就是画布的（0,0）点为画布的左上角，向左x轴坐标增加，向下y坐标增加。超出画布的部分将不会显示。

　　3.Canvas的常用一些方法:

　　　　之前写过关于canvas的具体使用方法和两个实例，就不再详述。请移步。。。学习记录(一)之h5_canvas

Svg:

　　1.什么是svg:

　　　　SVG 用于定义网络的基于矢量的图形，指可伸缩矢量图形 (Scalable Vector Graphics)，与canvas不同它使用的是 XML 格式来定义图形，因为它绘制的图像为矢量图，所以在放大或改变尺寸的情况下其图形质量不会有损失。

　　2.Svg的用法

　　　1）SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。

　　　　　　<embed>、<object>会有版本和规范问题，<iframe> 标签可工作在大部分的浏览器中。所以我们一般使用<iframe>标签引入就可以了。

语法：

<iframe src="rect.svg" width="300" height="100">

</iframe>

　但在 HTML5 中，能够将 SVG 元素直接嵌入 HTML 页面中：

　　实例

　　xmlns为名命空间，polygon为创建了一个多边形图片，style则负责设置图片的样式；

<!DOCTYPE html>

<html>

<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

  <polygon points="100,10 40,180 190,60 10,60 160,180"

  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

</svg>

</body>

</html>

　　2)一些预定义的形状元素，可被开发者使用和操作：

  • 矩形 <rect>
<rect x="20" y="20" width="250" rx="20" ry="20"

 height="250"

style="fill:blue;stroke:pink;stroke-width:5;

fill-opacity:0.1;stroke-opacity:0.9"/>

代码解释：

x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）

y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）rx 和 ry 属性可使矩形产生圆角。

CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）

CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）

  • 圆形 <circle>
<circle cx="100" cy="50" r="40" stroke="black"

stroke-width="2" fill="red"/>

　　代码解释：

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)

r 属性定义圆的半径。

  • 椭圆 <ellipse>
<ellipse cx="300" cy="150" rx="200" ry="80"

style="fill:rgb(200,100,50);

stroke:rgb(0,0,100);stroke-width:2"/>

代码解释：

cx 属性定义圆点的 x 坐标

cy 属性定义圆点的 y 坐标

rx 属性定义水平半径

ry 属性定义垂直半径

  • 线 <line>
<line x1="0" y1="0" x2="300" y2="300"

style="stroke:rgb(99,99,99);stroke-width:2"/>

代码解释：

x1 属性在 x 轴定义线条的开始

y1 属性在 y 轴定义线条的开始

x2 属性在 x 轴定义线条的结束

y2 属性在 y 轴定义线条的结束

  • 多边形 <polygon>
<polygon points="220,100 300,210 170,250"

style="fill:#cccccc;

stroke:#000000;stroke-width:1"/>

代码解释：

points 属性定义多边形每个角的 x 和 y 坐标

  • 折线 <polyline>
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"

style="fill:white;stroke:red;stroke-width:2"/>
  • 路径 <path>
<path d="M250 150 L150 350 L350 350 Z" />

代码解释：

上面的例子定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

<path> 标签用来定义路径。

下面的命令可用于路径数据：

    • M = moveto

    • L = lineto

    • H = horizontal lineto

    • V = vertical lineto

    • C = curveto

    • S = smooth curveto

    • Q = quadratic Belzier curve

    • T = smooth quadratic Belzier curveto

    • A = elliptical Arc

    • Z = closepath

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

Canvas和svg比较

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

　　1）SVG

　　SVG 是一种使用 XML 描述 2D 图形的语言。 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

　　2)Canvas

　　Canvas 通过 JavaScript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

2.Canvas 与 SVG 的不同之处

1）Canvas

    • 1）依赖分辨率
    • 2）不支持事件处理器
    • 3）弱的文本渲染能力
    • 4）能够以 .png 或 .jpg 格式保存结果图像
    • 5）最适合图像密集型的游戏，其中的许多对象会被频繁重绘

2）SVG

1）不依赖分辨率

2）支持事件处理器

3）最适合带有大型渲染区域的应用程序（比如谷歌地图）

4）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

5) 不适合游戏应用

H5_canvas与svg的更多相关文章

  1. 【Web动画】SVG 实现复杂线条动画

    在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...

  2. 【Web动画】SVG 线条动画入门

    通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...

  3. SVG:textPath深入理解

    SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...

  4. SVG:linearGradient渐变在直线上失效的问题解决方案

    SVG开发里有个较为少见的问题. 对x1=x2或者y1=y2的直线(line以及path),比如: <path d="M200,10 200,100" stroke=&quo ...

  5. HTML5_05之SVG扩展、地理定位、拖放

    1.SVG绘图总结: ①方法一:已有svg文件,<img src="x.svg">  方法二:<body><svg></svg>&l ...

  6. HTML5_04之SVG绘图

    1.关于Canvas绘制图像: 问题:需要绘制多张图片时,必须等待所有图片加载完成才能开始绘制:而每张图片都是异步请求,彼此没有先后顺序,哪一张先加载完成完全无法预测: 方案: var progres ...

  7. 关于SVG的viewBox

    在SVG中,通过svg标记的 width和height可以规定这段SVG代码所表达的数据在绘制时所占用的空间大小 如下代码svg设置了宽度与高度,rect同样,所以结果自然是全屏 <svg wi ...

  8. JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

    1.$和jquery在全局命名空间中定义的唯一两个变量.   2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象.   3.jquery的四种调用方式:     <1>传递C ...

  9. Notes:SVG(4)基于stroke-dasharray和stroke-dashoffset圆形进度条

    stroke-dasharray:定义描边的虚线长度,如果提供奇数个,则会自动复制该值成偶数 stroke-dashoffset:定义虚线描边的偏移量(在路径开始的前面,看不到) 实现如下所示 svg ...

随机推荐

  1. node.js使用免费的阿里云ip查询获取ip所在地

    在项目过程中,我们常常需要获取IP的所在地.而这一功能一般都是通过一些数据网站的对外接口来实现,这些接口一般情况下都是付费使用的.在这篇文章中我将记录,基于node.js的阿里云免费IP地址查询接口的 ...

  2. java后端服务器读取excel将数据导入数据库

    使用的是easypoi,官网文档:http://easypoi.mydoc.io/ /** * 导入Excel文件 */ @PostMapping("/importTeacher" ...

  3. sql的转义字符单引号

    在SQL中,我们都知道单引号 ' 表示字符串的开始和结束符号,如: select * from students where name = '小明'; 但如果字符串里面有单引号时,应该怎么查询呢? 这 ...

  4. RISC-V踩坑记－－－－__builtin_clz((x)库函数的应用

    RISC-V的确是个好东西,可是,免费的东西往往需要付出代价才能得到了,最近遇到了一个算法中的问题,追了好久,最终追到了这个库函数中,没想到,这个库函数居然还隐藏着一些猫腻.值得记下来啊. 首先上一个 ...

  5. mac中：不能完成此操作，因为找不到一个或多个需要的项目。（错误代码 -43）

    今天使用mac删除某文件时,遇到此错误: 不能完成此操作,因为找不到一个或多个需要的项目.(错误代码 -43) 于是采用命令行删除可以正确删除:在要删除的文件夹坐在目录下执行   rm -rf tes ...

  6. 使用 WRK 压力测试工具对 ASP.NET Core 的接口进行压力测试

    0. 简要介绍 WRK 是一款轻量且易用的 HTTP 压力测试工具,通过该工具我们可以方便地对我们所开发的 WebAPI 项目进行压力测试,并且针对测试的情况返回结果. PS:Wrk 并不能针对测试的 ...

  7. .Net RabbitMQ系列之环境搭建于RabbitMQ基本介绍

    本系列主要讲解RabbitMQ在.Net环境下的应用,由于Linux环境下,本人Linux功力有限,所以本系列的RabbitMQ跑在Windows环境中.所以的配置之类都在Windows环境中进行. ...

  8. 详解Maven用户的配置settings.xml

    Maven用户设置 作者其他技术文章 1)Oracle性能优化之查询语句通用原则 2)Redis常用命令 3) SpringCloud入门之常用的配置文件 application.yml和 boots ...

  9. centos7下安装samba服务器

    samba笔记: http://services.linuxpanda.tech/%E7%BD%91%E7%BB%9C%E6%96%87%E4%BB%B6%E5%85%B1%E4%BA%AB/samb ...

  10. Java 容器源码分析之 Set

    Set 表示由无重复对象组成的集合,也是集合框架中重要的一种集合类型,直接扩展自 Collection 接口.在一个 Set 中,不能有两个引用指向同一个对象,或两个指向 null 的引用.如果对象 ...