• 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. 在 Azure 上部署 Kubernetes 集群

    在实验.演示的时候,或者是生产过程中,我经常会需要运行一些 Docker 负载.虽然这在本地计算机上十分容易,但是当你要在云端运行的时候就有点困难了.相比于本地运行,在云端运行真的太复杂了.我尝试了几 ...

  2. 【题解】Luogu P5251 [LnOI2019]第二代图灵机

    原题传送门 前置芝士:珂朵莉树 珂朵莉树的主要功能是区间赋值 这道题还算明显(操作2) 一开始看见这题觉得很毒瘤,但仔细想想发现颜色和数字之间没有什么关系 我们一共要维护三个东西: 1.区间和:树状数 ...

  3. es6中promise实现ajax的例子

    function getData(url){ var pro = new Promise(function(resolve,reject){ var xhr = null; try{ xhr = ne ...

  4. C#线程同步（2）- 临界区＆Monitor

    文章原始出处 http://xxinside.blogbus.com/logs/46740731.html 预备知识:C#线程同步(1)- 临界区&Lock 监视器(Monitor)的概念 可 ...

  5. javaScript数据类型的一些小细节

    JavaScript的数据类型有哪些就不说了,没必要. 由于JavaScript是一个弱类型的语言,就是定义的时候不需要定义数据类型,数据类型自动根据变量值来确定.而在JavaScript里面,数据类 ...

  6. 让selenium中的Cromerderive不加载图片设置

    把配置参数(chrom_opt)设置好后将其添加到 browser = webdriver.Chrome(executable_path="chromedriver.exe的路径" ...

  7. TCP 传输控制协议

    开头先说几个协议: IP:网际协议 TCP:传输控制协议 Http:超文本传输协议 AMQP:高级消息队列协议 一:TCP是什么? TCP(Transmission Control Protocol ...

  8. MyBatis进阶（四）

    mapper.xml文件的编写 mapper.xml映射文件实现数据库和实体类之间的映射关系,定义操作数据库的sql语句. 主体部分 文件头部 <?xml version="1.0&q ...

  9. log4.net使用指南

    1.简介 1.1 Log4net的优点: 几乎所有的大型应用都会有自己的用于跟踪调试的API.因为一旦程序被部署以后,就不太可能再利用专门的调试工具了.然而一个管理员可能需要有一套强大的日志系统来诊断 ...

  10. Flume+Sqoop+Azkaban笔记

    大纲(辅助系统) 离线辅助系统 数据接入 Flume介绍 Flume组件 Flume实战案例 任务调度 调度器基础 市面上调度工具 Oozie的使用 Oozie的流程定义详解 数据导出 sqoop基础 ...