【Canvas】(1)---概述+简单示例

时间 2020-04-25

标签 Canvas 概述简单示例繁體版

原文原文链接

Canvas---概述+简单示例

若是通俗的去理解Canvas,咱们能够去理解成它相似于咱们电脑自带的画图工具同样，canvas首先是选择一块画布，而后在这个画布上描绘咱们想画的东西，画好后展现给用户看。javascript

固然它不只能够画动态图片，甚至能够画出3D效果出来。html

1、canvas概述

一、什么是canvas

canvas 是HTML5提供的一种新标签。java

<canvas></canvas>

canvas 标签只是图形容器，至关于一个画布，canvas 元素自己是没有绘图能力的。全部的绘制工做必须在 JavaScript 内部完成，至关于使用画笔在画布上画画。web

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas

二、canvas的特性

1.互动性：canvas支持互动，能够很好的响应用户的操做，咱们能够经过Javascript来监键盘，鼠标，及其触摸设备相关事件。浏览器

2.动画：任何被canvas绘制的图形均可以添加动画，简单的弹跳球或者复杂的HTML5游戏均可以实现。编辑器

3.灵活性：开发人员可使用canvas来绘制任何的内容，好比，直线，图形，文字，图片等，能够包含动画或者不包含。同时你能够添加音频或者视频浏览器支持。工具

4.流行度：canvas目前很流行，不少的开发人员都使用它来开发相似游戏或者绘图类应用。学习

5.web标准：只须要有浏览器就能够运行，而非flash或者silverlight，须要安装相关的插件。动画

三、canvas应用领域

1.可视化数据：各种统计图表，好比:百度的echart

2.场景秀：用canvas实现动态的广告效果可以很是融洽的跨平台运行。如:手机中微产品.在移动端兼容性很好。

3.游戏：canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas成为HTML5小游戏开发首选。

4.其余可嵌入网站的内容 (多用于活动页面、特效)：相似图表、音频、视频，还有许多元素可以更好地与Web融合，而且不须要任何插件。

5.趋势=> 模拟器：不管从视觉效果仍是核心功能方面来讲，模拟器产品能够彻底由JavaScript来实现。模拟真实硬件环境,如移动端各类类型手机.

6.趋势=> 远程计算机控制： Canvas可让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。

7.趋势=> 图形编辑器： Photoshop图形编辑器将可以100%基于Web实现。

2、canvas绘图基础

一、绘制画布

<body>
<!--1.准备画布  画布默认白色的 默认长宽300*150-->
<!--1.1 设置画布的大小  width="600" height="400" -->
<canvas width="600" height="400" ></canvas>
<!--2.准备绘制工具-->
<script>
    /*1.获取元素*/
    var myCanvas = document.querySelector('canvas');
    /*2.获取上下文 绘制工具箱 2d表明是2d效果 3d就是指3d效果 3d只有IE11才支持*/
    var ctx = myCanvas.getContext('2d'); 
</script>
</body>

context 是一个封装了不少绘图功能的对象，咱们在页面中建立一个 canvas 标签以后，首先要使用 getContext() 获取 canvas 的上下文环境getContext("2d") 对象是内

建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

以上代码咱们经过canvas取到2D的context。在HTML5 Canvas的2D结构中，坐标（0,0）在左上方，这和传统的坐标不太同样。你们须要注意一下，以下图所示：

二、绘制基本路径

1)、绘制起点(moveTo)

* 语法：ctx.moveTo(x, y); 
* 解释：设置上下文绘制路径的起点。至关于移动画笔到某个位置
* 参数：x,y 都是相对于 canvas盒子的最左上角。
* 注意：**绘制线段前必须先设置起点，否则绘制无效。**

2)、绘制直线(lineTo)

* 语法：ctx.lineTo(x, y);
* 解释：从x,y的位置绘制一条直线到起点或者上一个线头点。
* 参数：x,y 线头点坐标。

3)、路径开始和闭合

* 开始路径：ctx.beginPath();
* 闭合路径：ctx.closePath();
* 解释：若是复杂路径绘制，必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一块儿。
* beginPath: 核心的做用是将 不一样绘制的形状进行隔离，
  每次执行此方法，表示从新绘制一个路径,跟以前的绘制的墨迹能够进行分开样式设置和管理。

4)、描边(stroke)

* 语法：ctx.stroke();
* 解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke

5)、总结
canvas绘制的基本步骤：

第一步：得到上下文 =>canvasElem.getContext('2d');
第二步：开始路径规划 =>ctx.beginPath()
第三步：移动起始点 =>ctx.moveTo(x, y)
第四步：绘制线(矩形、圆形、图片...) =>ctx.lineTo(x, y)
第五步：闭合路径 =>ctx.closePath();
第六步：绘制描边 =>ctx.stroke();

3、绘制线示例

一、画一条线

代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{ border: 2px solid #00CED1; }
    </style>
</head>
<body>
<canvas width="300" height="200" ></canvas>
<script>
    /*1.获取元素*/
    var myCanvas = document.querySelector('canvas');
    /*2.获取上下文 绘制工具箱 */
    var ctx = myCanvas.getContext('2d'); 
    /*3.移动画笔*/
    ctx.moveTo(100,100);
    /*4.绘制直线 (轨迹，绘制路径)*/
    ctx.lineTo(200,100);
    /*5.描边*/
    ctx.stroke();
</script>
</body>
</html>

运行效果

二、绘制平行线

代码

/*上面代码部分省略*/
    /*第一条线*/
    ctx.moveTo(100,100);
    ctx.lineTo(200,100);
    /*第二条线*/
    ctx.moveTo(100,150);
    ctx.lineTo(200,150);
    /*描边*/
    ctx.stroke();

运行结果

三、绘制三角形

代码

/*1.绘制一个三角形*/
    ctx.moveTo(100,100);
    //第一条线
    ctx.lineTo(150,100);
    //第二条线
    ctx.lineTo(150,150);
    /*第三条线使用canvas的自动闭合 */
    ctx.closePath();
    //修改宽度
    ctx.lineWidth = 5;
    /*2.描边*/
    ctx.stroke();

运行结果

四、绘制正方形

代码

/*1.绘制两个正方形 一大200一小100 套在一块儿*/
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.lineTo(300,300);
    ctx.lineTo(100,300);
    ctx.closePath();
    
    //第二个正方形
    ctx.moveTo(150,150);
    ctx.lineTo(150,250);
    ctx.lineTo(250,250);
    ctx.lineTo(250,150);
    ctx.closePath();

    /*2.去填充*/
    //ctx.stroke();
    ctx.fillStyle = 'red';
    ctx.fill();

运行结果

重点：在上面填充的时候回遵循非零环绕规则,这句话要理解是挺好理解的，解释起来不大好解释，具体能够参考这篇文章Canvas教程(21)——非零环绕原则

五、设置样式

这里展现一些经常使用的设置样式的方法，具体就不作示例演示了。

- lineWidth 线宽，默认1px
- lineCap 线末端类型：(butt默认)、round、square 
- lineJoin 相交线的拐点 miter(默认)、round、bevel
- strokeStyle 线的颜色
- fillStyle 填充颜色
- setLineDash() 设置虚线
- getLineDash() 获取虚线宽度集合
- lineDashOffset 设置虚线偏移量（负值向右偏移）

参考

一、 Canvas概述

二、Canvas学习笔记

三、Canvas从入门到改行

别人骂我胖，我会生气，由于我内心认可了我胖。别人说我矮，我就会以为可笑，由于我内心知道我不可能矮。这就是咱们为何会对别人的攻击生气。
攻我盾者，乃我心里之矛(9)

)。

1. SpringData概述+简单查询示例(一)
2. Spring - 1.简单概述
3. Mybatis - 1.简单概述
4. EJB3.0完整示例教程(1)----概述
5. Flume概述和简单实例
6. B树概述与简单应用示例(C#)
7. JVM简单概述
8. NoSQL简单概述
9. Netty简单概述
10. FPGA简单概述
更多相关文章...
• Thymeleaf+SpringMVC5示例 - Thymeleaf 教程
• Thymeleaf Servlet Hellow World示例 - Thymeleaf 教程
• Java Agent入门实战（二）-Instrumentation源码概述
• Github 简明教程

【Canvas】(1)---概述+简单示例

Canvas---概述+简单示例

1、canvas概述

一、什么是canvas

二、canvas的特性

三、canvas应用领域

2、canvas绘图基础

一、绘制画布

二、 绘制基本路径

3、绘制线示例

一、画一条线

二、绘制平行线

三、绘制三角形

四、绘制正方形

五、设置样式

参考

二、绘制基本路径