Canvas---概述+简单示例

如果通俗的去理解Canvas,我们可以去理解成它类似于我们电脑自带的画图工具一样，canvas首先是选择一块画布，然后在这个画布上描绘我们想画的东西，画好后展示给用户看。

当然它不仅可以画动态图片，甚至可以画出3D效果出来。

一、canvas概述

1、什么是canvas

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

 <canvas></canvas>

canvas 标签只是图形容器，相当于一个画布，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，相当于使用画笔在画布上画画。

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

2、canvas的特性

1.互动性：canvas支持互动，可以很好的响应用户的操作，我们可以通过Javascript来监键盘，鼠标，及其触摸设备相关事件。

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

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

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

5.web标准：只需要有浏览器就可以运行，而非flash或者silverlight，需要安装相关的插件。

3、canvas应用领域

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

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

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

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

5.趋势=> 模拟器： 无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。模拟真实硬件环境,如移动端各种类型手机.

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

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

二、canvas绘图基础

1、绘制画布

<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）在左上方，这和传统的坐标不太一样。大家需要注意一下，如下图所示：

2、 绘制基本路径

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();

三、绘制线示例

1、画一条线

代码

<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>

运行效果

2、绘制平行线

代码

    /*上面代码部分省略*/

    /*第一条线*/

    ctx.moveTo(100,100);

    ctx.lineTo(200,100);

    /*第二条线*/

    ctx.moveTo(100,150);

    ctx.lineTo(200,150);

    /*描边*/

    ctx.stroke();

运行结果

3、绘制三角形

代码

    /*1.绘制一个三角形*/

    ctx.moveTo(100,100);

    //第一条线

    ctx.lineTo(150,100);

    //第二条线

    ctx.lineTo(150,150);

    /*第三条线使用canvas的自动闭合 */

    ctx.closePath();

    //修改宽度

    ctx.lineWidth = 5;

    /*2.描边*/

    ctx.stroke();

运行结果

4、绘制正方形

代码

   /*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)——非零环绕原则

5、设置样式

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

- lineWidth 线宽，默认1px

- lineCap 线末端类型：(butt默认)、round、square

- lineJoin 相交线的拐点 miter(默认)、round、bevel

- strokeStyle 线的颜色

- fillStyle 填充颜色

- setLineDash() 设置虚线

- getLineDash() 获取虚线宽度集合

- lineDashOffset 设置虚线偏移量（负值向右偏移）

参考

1、 Canvas概述

2、Canvas学习笔记

3、Canvas从入门到改行

别人骂我胖，我会生气，因为我心里承认了我胖。别人说我矮，我就会觉得好笑，因为我心里知道我不可能矮。这就是我们为什么会对别人的攻击生气。

攻我盾者，乃我内心之矛(9)

)。

【Canvas】(1)---概述+简单示例的更多相关文章

  1. WebGL简易教程(一)：第一个简单示例

    目录 1. 概述 2. 示例:绘制一个点 1) HelloPoint1.html 2) HelloPoint1.js (1) 准备工作 (2) 着色器 (3) 顶点着色器 (4) 片元着色器 (5) ...

  2. Redis 安装与简单示例

    Redis 安装与简单示例 一.Redis的安装 Redis下载地址如下:https://github.com/dmajkic/redis/downloads 解压后根据自己机器的实际情况选择32位或 ...

  3. 单点登录SSO：概述与示例

    目录 概述 演示一:零改造实施单点登录 演示二: 单点注销 演示三:集成AD认证 演示四:客户端单点登录 演示五:移动端单点登录 单点登录SSO概述 本系列将由浅入深的,带大家掌握最新单点登录SSO方 ...

  4. [转载]单点登录SSO：概述与示例

    原文地址: https://www.cnblogs.com/baibaomen/p/sso.html 目录 概述 演示一:零改造实施单点登录 演示二: 单点注销 演示三:集成AD认证 演示四:客户端单 ...

  5. Linux下的C Socket编程 -- server端的简单示例

    Linux下的C Socket编程(三) server端的简单示例 经过前面的client端的学习,我们已经知道了如何创建socket,所以接下来就是去绑定他到具体的一个端口上面去. 绑定socket ...

  6. C# 构建XML（简单示例）

    C# 构建XML的简单示例: var pars = new Dictionary<string, string> { {"url","https://www. ...

  7. Canvas 知识体系简单总结

    Canvas 知识体系简单总结 标签(空格分隔): HTML5 Canvas 本文原创,如需转载,请注明出处 前言 知识点零零散散,一个上午整理了一下,内容不多,方便记忆. 本文不是教程,如需教程移步 ...

  8. 根据juery CSS点击一个标签弹出一个遮罩层的简单示例

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. ACEXML解析XML文件——简单示例程序

    掌握了ACMXML库解析XML文件的方法后,下面来实现一个比较完整的程序. 定义基本结构 xml文件格式如下 <?xml version="1.0"?> <roo ...

随机推荐

  1. Java并发编程学习前期知识下篇

    Java并发编程学习前期知识下篇 通过上一篇<Java并发编程学习前期知识上篇>我们知道了在Java并发中的可见性是什么?volatile的定义以及JMM的定义.我们先来看看几个大厂真实的 ...

  2. Html网页链接数据库验证账户密码（新手）

    连接代码(其中用到了连接池,不要忘记Jar包.拉入配置文件和工具类): package cn.Wuchuang.Servlet; import org.springframework.jdbc.cor ...

  3. P2341 [USACO03FALL][HAOI2006]受欢迎的牛 G 题解

    原题链接 POJ的链接 简要题意: 给定一张图,求多少个点,每个点都能到达它. 本题作为强连通分量的入门题. 何为强连通分量?有什么用? 下面一一解释. 首先,我们要确认,这道题目如果不用强连通分量而 ...

  4. 直径问题 Diameter Problems

    2019-11-03 21:37:59 一.Diameter of Binary Tree 问题描述: 问题求解: 解法一.第一反应是树上动归,每个节点保存一下左右的最大深度,最后以每个节点作为中枢计 ...

  5. 动态网站项目（Dynamic Web Project）CRUD(增删改查)功能的实现(mvc(五层架构)+jdbc+servlet+tomcat7.0+jdk1.8)，前端使用JSP+JSTL+EL组合

    代码分享链接 https://pan.baidu.com/s/1UM0grvpttHW9idisiqa6rA    提取码:hx7c 图示           项目结构 1.SelectAllUser ...

  6. Hive设置配置参数的方法，列举8个常用配置

    Hive设置配置参数的方法 Hive提供三种可以改变环境变量的方法,分别是: (1).修改${HIVE_HOME}/conf/hive-site.xml配置文件: (2).命令行参数: (3).在已经 ...

  7. MFC之创建多级动态菜单

    一开始以我是这样做的,结果是错误的: 这段代码第一次点击时,会在第6个位置创建MFC菜单,我本以为再次点击,menu->GetSubMenu(5)返回的值就不会为空了,但事实是它返回了NULL, ...

  8. 给社团同学做的R语言爬虫分享

    大家好,给大家做一个关于R语言爬虫的分享,很荣幸也有些惭愧,因为我是一个编程菜鸟,社团里有很多优秀的同学经验比我要丰富的多,这次分享是很初级的,适用于没有接触过爬虫且有一些编程基础的同学,内容主要有以 ...

  9. netty实现群聊功能

    [概述] 实现一个网络群聊工具.参与聊天的客户端消息是通过服务端进行广播的. 主要由两块组成:聊天服务器端(ChatServer)和聊天客户端(ChatClient). 聊天服务器(ChatServe ...

  10. SpringCloud微服务架构和SOA架构

    1,传统的三层架构 在传统的架构中,SSH,SSM,主要分为web 控制层,业务逻辑层,数据库访问层,单点项目,项目没有拆分,所有的开发任务全部写在一个项目中,耦合度比价高,如果程序中的一个功能出现了 ...