• 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. ubuntu+anaconda+mxnet环境配置

    为了insightface和mxnet较劲的一天 mxnet环境: 官网下载pyhton2.7版本的anaconda,随便找个安装教程 sh Anacondaxxxx.sh #一路默认即可,第二个回车 ...

  2. Deep Convolution Auto-encoder

    一.概念介绍 自编码器是一种执行数据压缩的网络架构,其中的压缩和解压缩功能是从数据本身学习得到的,而非人为手工设计的.自编码器的两个核心部分是编码器和解码器,它将输入数据压缩到一个潜在表示空间里面,然 ...

  3. deepin 安装scrapy安装出错：fatal error: Python.h 的解决办法

    环境deepin Linux 15.7 Python3.6.5 今天重新装了deepin系统,需要重新安装scrapy,直接pip了一下,没成. 报错:fatal error: Python.h: 没 ...

  4. CSS3@media媒体查询

    CSS3@media媒体查询 定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式 使用 @media 查询,你可以针对不同的媒体类型定义不同的 ...

  5. redis的架构（一）

    redis认证 redis的认证比较简单,这里简单来说明一下怎么设置redis的认证: redis的配置文件中有一个requirepass字段,在后面直接写上对应的密码即可.默认redis的不开启认证 ...

  6. linux编译链接找不到库文件的解决方法。

    今天编译出现ld: 0706-006 Cannot find or open library file: -l xerces-c_static,ld:open(): A file or directo ...

  7. server.xml引入子文件配置（tomcat虚拟主机）

    在配置tomcat虚拟主机时候,如何每一个虚拟主机写成单独文件,server.xml包含这些子文件? 如以下<OneinStack>中,添加JAVA环境虚拟主机后tomcat配置文件详情: ...

  8. flutter常规错误

    https://blog.csdn.net/mo_feng_/article/details/85104013

  9. Java对象、引用、实例

    https://blog.csdn.net/zmx729618/article/details/54093075

  10. Eclipse中Lombok的安装和注解说明

    Lombok 可用来帮助开发人员消除 Java 的重复代码,尤其是对于简单的 Java 对象(POJO),比如说getter/setter/toString等方法的编写.它通过注解实现这一目的. 官网 ...