• 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. LP-KPN

    LP-KPN 网络结构 网络解析 1. 网络结构中绿色星星标志 公式.其实就是用预测出来的核在原图片经过Laplacian pyramid decomposes 后的图片上进行卷积运算.所以应该使用p ...

  2. 2018-2019-2 20165316 《网络对抗技术》 Exp6 信息搜集与漏洞扫描

    2018-2019-2 20165316 <网络对抗技术> Exp6 信息搜集与漏洞扫描 1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应 ...

  3. C博客作业03--函数

    1. 本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 这几周学习了函数,题目还是原样只是多了种做题的方法.一开始看书感觉声明,定义啊,还有全局变量那些,文绉 ...

  4. go 语言

    go语言(或 Golang)是Google在 2007 年开发的一种开源编程语言,于2009年11月开源,2012年发布go稳定版 go是非常年轻的一门语言,它的主要目标是“兼具Python 等动态语 ...

  5. Visual Studio 2010 集成 SP1 补丁 制作 Visual Studio 2010 Service Pack 1 完整版安装光盘的方法

    Now that Visual Studio 2010 SP1 has been released, administrators and developers may wish to install ...

  6. Java基础总结1

    数据类型: byte    1字节 short   2字节 int        4字节 long     8字节 float     4字节 double   8字节 char       2字节 ...

  7. centos6删除nginx

    1.ps -ef|grep nginx 查看nginx进程 2.找到nginx相对应的位置 3.停止nginx服务: 4.删除nginx安装的相关路径(根据自己安装的情况来删除) 如果是yum安装,就 ...

  8. Invalid bound statement (not found):xxx错误的可能原因

    1,报错信息 log4j:WARN No appenders could be found for logger (org.springframework.core.env.StandardEnvir ...

  9. RHCSA

     系统管理 redhat 7 破解修改root密码 修改系统主机名 修改系统地址掩码网关 创建系统默认软件仓库 安装系统内核升级 绑定到外部验证服务LDAP.配置 autofs 用户组管理 创建用户组 ...

  10. 16: vue + crypto-js + python前后端加密解密

    1.1 vue中使用crypto-js进行AES加密解密    参考博客:https://www.cnblogs.com/qixidi/p/10137935.html 1.初始化vue项目 vue i ...