• Canvas的介绍

  • 1.1、创建canvas元素

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

  • <canvas id="can" width="800"  height="600">不支持Canvas</canvas>

    以上代码创建了一个宽度为800像素，高度为600像素的canvas。不建议使用CSS样式指定宽度和高度。
    canvas标签中间的内容为替代显示内容，当浏览器不支持canvas标签时会显示出来。

    创建了canvas元素后，要在canvas元素上面绘制图象，首先必须获取canvas环境上下文：
    canvas.getContext(画布上绘制的类型)
    2d： 表示2维
    experimental-webgl： 表示试验版3维
    webgl：表示3维

    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title>canvas绘图1</title>
    6.     </head>
    7.     <body>
    8.         <canvas id="canvas1" width="800" height="600"></canvas>
    9.         <script type="text/javascript">
    10.            //获得画布元素
    11.             var canvas1=document.getElementById("canvas1");
    12.             //获得2维绘图的上下文
    13.             var ctx=canvas1.getContext("2d");
    14.  
    15.             //设置线宽
    16.             ctx.lineWidth=10;
    17.             //设置线的颜色
    18.             ctx.strokeStyle="blue";
    19.  
    20.             //将画笔移动到00点
    21.             ctx.moveTo(0,0);
    22.             //画线到800，600的坐标
    23.             ctx.lineTo(800,600);
    24.  
    25.             //执行画线
    26.             ctx.stroke();
    27.         </script>
    28.     </body>
    29. </html>

    　　

    1.2、画线

  • context.moveTo(x,y)

    把画笔移动到x,y坐标，建立新的子路径。

    context.lineTo(x,y)
    建立上一个点到x,y坐标的直线，如果没有上一个点，则等同于moveTo(x,y)，把（x,y）添加到子路径中。

    context.stroke() 
    描绘子路径//设置线宽

    1. ctx.lineWidth = 10;
    2. //设置线的颜色
    3. ctx.strokeStyle = "blue";
    4. //将画笔移到x0,y0处
    5. context.moveTo(x0, y0);
    6. //从x0,y0到x1,y1画一条线
    7. ontext.lineTo(x1, y1);
    8. //从x1,y1到x2,y2画条线
    9. ontext.lineTo(x2, y2);
    10. //执行填充
    11. ontext.fill();
    12. //执行画线
    13. context.stroke();
    15. 　

    结合javascript事件实现鼠标自由划线：

    1. <!DOCTYPE html>
    2. <html>
    3.  
    4.     <head>
    5.         <meta charset="UTF-8">
    6.         <title>canvas绘图2</title>
    7.     </head>
    8.  
    9.     <body>
    10.         <canvas id="canvas1" width="" height=""></canvas>
    11.         <script type="text/javascript">
    12.             //获得画布元素
    13.             var canvas1 = document.getElementById("canvas1");
    14.             //获得2维绘图的上下文
    15.             var ctx = canvas1.getContext("2d");
    16.  
    17.             //设置线宽
    18.             ctx.lineWidth = ;
    19.             //设置线的颜色
    20.             ctx.strokeStyle = "blue";
    21.  
    22.             canvas1.onmousemove=function(e){
    23.                 //划线到当前客户端的x与y座标
    24.                 ctx.lineTo(e.clientX, e.clientY);
    25.                 //执行画线
    26.                 ctx.stroke();
    27.             }
    28.         </script>
    29.     </body>
    30.  
    31. </html>

canvas和SVG的更多相关文章

  1. HTML5新特性——HTML 5 Canvas vs. SVG

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  2. 【HTML5】Canvas和SVG的区别

    * SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 ...

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

    SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 SV ...

  4. HTML5 Canvas、内联 SVG、Canvas vs. SVG

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...

  5. 列表总结Canvas和SVG的区别

    参考链接: 菜鸟教程 HTML5 内联SVG 经典面试题(讨论canvas与svg的区别) Canvas | SVG ---|--- 通过 JavaScript 来绘制 2D 图形|是一种使用 XML ...

  6. H5 Canvas vs. SVG

    HTML 5 Canvas vs. SVG HTML5 SVG HTML5 地理定位 Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XM ...

  7. canvas与svg区别

    canvas与svg区别 和SVG比起来有两个弱点,一个是画布里的内容是独立的,不能当成html元素:二是CANVAS是属于位图格式,而SVG是矢量图,可以平滑放大. HTML5的canvas画出来的 ...

  8. canvas与svg

    canvas与svg都是用于在网页上绘制图形(位图). canvas是HTML5新出来的一个标签,用来定义一块画图的区域(canvas本身没有绘制能力),用JavaScript来画图,可以绘制路径.矩 ...

  9. Canvas 和 SVG 的不同

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  10. HTML 5 Canvas vs. SVG

    pick up from http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp Canvas 与 SVG 的比较 下表列出了 canvas ...

随机推荐

  1. linux下列出所有连接到你的Server的IP地址

    linux下列出所有连接到你的Server的IP地址 最近要做一个检查所有连接到主机的IP的脚本,google到一篇老外写的文章 <List all IP addresses connected ...

  2. Dubbo 泛化调用的参数解析问题及一个强大的参数解析工具 PojoUtils

    排查了3个多小时,因为一个简单的错误,发现一个强大的参数解析工具,记录一下. 背景 Nodejs 通过 tether 调用 Java Dubbo 服务.请求类的某个参数对象 EsCondition 有 ...

  3. Java EE开发技术课程第五周（Applet程序组件与AJAX技术）

    1.Applet程序组件 1.1.定义: Applet是采用Java编程语言编写的小应用程序,该程序可以包含在HTML(标准通用标记语言的一个应用)页中,与在页中包含图像的方式大致相同.含有Apple ...

  4. Go语言文件操作

    打开和关闭文件 os.Open()函数能够打开一个文件,返回一个*File和一个err. file.close()方法能够关闭文件. //打开和关闭文件 func main() { file,err ...

  5. C++ this指针的详解

    C++中this指针的用法详解   转自:http://blog.chinaunix.net/uid-21411227-id-1826942.html 1. this指针的用处: 一个对象的this指 ...

  6. [dart学习]第四篇：函数和操作符(本篇未完待续)

    接着学习dart的函数和操作符. 1.函数Function dart是一种真正的面向对象的语言,通常一个函数也是Function类型的对象,这也就是说可以把函数赋值给一个变量,或者作为另一个函数的入参 ...

  7. vue-cli3使用webpack-spritesmith配置雪碧图

    一.背景问题 项目中如果有大量的小图标,如果不使用阿里的iconfont.UI给一个加一个,加一个引用一个,每个图标虽然很小,但是也是一次请求,每次请求都是消耗性能资源的. 二.解决思路 使用webp ...

  8. appium+python3+pycharm踩得坑2

    没相当刚把上一个错误解决,这个马上就解决了: selenium.common.exceptions.WebDriverException: Message: A new session could n ...

  9. Bigger-Mai 养成计划，前端基础学习之HTML

    HTML 超文本标记语言(Hyper Text Markup Language) 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) ...

  10. 关于transactionscope 事务的脏数据

    在一个项目中,关于新客的检测,如果查询到积分记录就是老客,因为检测的之前先积分,因为使用的是事务,造成本地代码没提交前已经有该会员的积分记录,而到数据库中却查询不到记录.造成永远都是老客,解决的方法是 ...