• 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维

  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>canvas绘图1</title>
    
    </head>
    
    <body>
    
        <canvas id="canvas1" width="800" height="600"></canvas>
    
        <script type="text/javascript">
    
           //获得画布元素
    
            var canvas1=document.getElementById("canvas1");
    
            //获得2维绘图的上下文
    
            var ctx=canvas1.getContext("2d");

            //设置线宽
    
            ctx.lineWidth=10;
    
            //设置线的颜色
    
            ctx.strokeStyle="blue";

            //将画笔移动到00点
    
            ctx.moveTo(0,0);
    
            //画线到800，600的坐标
    
            ctx.lineTo(800,600);

            //执行画线
    
            ctx.stroke();
    
        </script>
    
    </body>
    
</html>

    　　

    1.2、画线

  • context.moveTo(x,y)

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

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

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

  • ctx.lineWidth = 10;
    
//设置线的颜色
    
ctx.strokeStyle = "blue";
    
//将画笔移到x0,y0处
    
context.moveTo(x0, y0);
    
//从x0,y0到x1,y1画一条线
    
ontext.lineTo(x1, y1);
    
//从x1,y1到x2,y2画条线
    
ontext.lineTo(x2, y2);
    
//执行填充
    
ontext.fill();
    
//执行画线
    
context.stroke();

　

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

  • <!DOCTYPE html>
    
<html>

    <head>
    
        <meta charset="UTF-8">
    
        <title>canvas绘图2</title>
    
    </head>

    <body>
    
        <canvas id="canvas1" width="" height=""></canvas>
    
        <script type="text/javascript">
    
            //获得画布元素
    
            var canvas1 = document.getElementById("canvas1");
    
            //获得2维绘图的上下文
    
            var ctx = canvas1.getContext("2d");

            //设置线宽
    
            ctx.lineWidth = ;
    
            //设置线的颜色
    
            ctx.strokeStyle = "blue";

            canvas1.onmousemove=function(e){
    
                //划线到当前客户端的x与y座标
    
                ctx.lineTo(e.clientX, e.clientY);
    
                //执行画线
    
                ctx.stroke();
    
            }
    
        </script>
    
    </body>

</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. java爬取免费HTTP代理 code-for-fun

    偶然看到一个提供免费HTTP 代理IP的网站,该网站一两个小时就会更新一次,很有用.之后自己就用Java写了一个爬虫,爬取网站上的代理IP,以备后用. 网站源码: <!DOCTYPE html& ...

  2. Oracle免安装绿色版-PLSQL连接报12154

    在环境变量添加 TNS_ADMIN  值是你的免安装客户端中sqlnet.ora   tnsnames.ora 所在的目录 参考地址:https://blog.csdn.net/feng_na/art ...

  3. 问题 1672: 迷宫问题 （BFS）

    题目链接:https://www.dotcpp.com/oj/problem1672.html 问题 1672: 迷宫问题 时间限制: 1Sec 内存限制: 32MB 提交: 663 解决: 158 ...

  4. TeamViewer连CentOS

    用过TeamViewer的人都会感叹其远程连接的强大,昨天有将Windows和CentOS在同一网段内互相连接打通了,今天在外网环境下突然想到是否可以用TeamViewer在外网环境下连到CentOS ...

  5. MySQL复制表-INSERT INTO SELECT

    基础table为: mysql> select * from staff; +----+----------+-------+ | id | name | slary | +----+----- ...

  6. iis相关概念和操作

    iis相关 iis是什么?      它是互联网信息服务的缩写,是网页服务组件(即多种服务器集成) iis为什么存在,作用是什么?      方便于网络上发布信息. 如何使用等等? 1)打开win7的 ...

  7. golang从文件按行读取并输出

    package main import ( "fmt" "os" "bufio" "io" "time&quo ...

  8. 提升node.js中使用redis的性能

    问题初现 某基于node.js开发的业务系统向外提供了一个dubbo服务,提供向第三方缓存查询.设置多项业务数据并聚合操作结果.在QPS达到800时(两台虚拟机,每台机器4Core8G4node进程) ...

  9. linux服务基础之DNS正反向解析、主从同步、子域授权及视图

    关键词: 正向解析 反向解析 主从复制 自域授权 视图 一.DNS基本原理 1.1 什么是DNS?BIND又是什么? DNS:Domain Name Service,它是一个基于应用层的协议,是C/S ...

  10. 关于 diff 和patch

    参考: https://blog.csdn.net/zygblock/article/details/53384862 diff和patch是 版本控制 git 的不可缺少的工具 diff 是用来比较 ...