• 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. SSM(Spring4.x.x+SpringMVC4.x.x+Mybatis3.4.x)框架整合

    本文是参考SSM框架——详细整合教程(Spring+SpringMVC+MyBatis)修改而来的 一.环境 1. Myeclipse2016 2. Mysql 二.具体步骤 1. 整合Spring和 ...

  2. python locust 性能测试：HOOKS<钩子方法>

    为locust中不同类型的事件,提供的钩子方法: from locust import TaskSet, task, events, Locust from locust.clients import ...

  3. .NET Core 2.0 项目的智能提示是英文，改成中文的解决方案

    截至目前为止(2017.09.21),Microsoft 官方并没有提供 .NET Core 2.0 正式版的多语言安装包. 因此,在 Visual Studio 2015 Update 3 和 Vi ...

  4. leetcode 66.加一 python3

    class Solution: def plusOne(self, digits): """ :type digits: List[int] :rtype: List[i ...

  5. 翻译 | Improving Distributional Similarity with Lessons Learned from Word Embeddings

    翻译 | Improving Distributional Similarity with Lessons Learned from Word Embeddings 叶娜老师说:"读懂论文的 ...

  6. JDK一键部署, 新添加进度条

    JDK部署, 脚本与JDK安装包放在同一目录 然后执行 source ./jdk.sh 稍等进度条100%即可 #******************************************* ...

  7. graph easy绘制ascii简易流程图

    graph-easy 日常我们经常需要画一些简易流程图,但是如果使用visio等工具来作图,一则略显大材小用,二则图片导出后再要粘贴.相比下,如果可以简单的用一些text的图来表达,则会简单的多.比如 ...

  8. Python3 tkinter基础 Scale orient 横竖 resolution单步步长 length 长度 tickinterval 指示刻度

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. 【BZOJ5194】Snow Boots

    [原题题面]传送门 [简化题意] 给定一个长度为n的序列. 有m次询问,每次询问给定两个数si,di.你一开始站在0,每次你可以走不超过di,但你到达的位置的数不能超过si.问能否走到n+1. n,m ...

  10. javascript 之 面向对象【继承】

    继承:函数没有签名,无法实现接口继承.ECMAScript只支持实现继承 1/原型链 回顾:构造函数.原型和实例的关系? 回:每个构造函数都有一个原型对象.原型对象都包含一个指向构造函数的指针.实例都 ...