Canvas入门到高级详解(上)

神奇的 canvas--AICODER 全栈培训 IT 培训专家

1、canvas 简介

1.1 什么是 canvas？（了解）

• 是 HTML5 提供的一种新标签

<canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布 画布 

• Canvas 是一个矩形区域的画布，能够用 JavaScript 在上面绘画。控制其每个像素。
• canvas 标签使用 JavaScript 在网页上绘制图像，自己不具有绘图功能。
• canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
• HTML5 以前的 web 页面只能用一些固定样式的标签：好比 p、div、h1 等

1.2 canvas 主要应用的领域（了解）

1. 游戏：canvas 在基于 Web 的图像显示方面比 Flash 更加立体、更加精巧，canvas 游戏在流畅度和跨平台方面更牛。
   25 超棒的 HTML5 Canvas 游戏

2. 可视化数据.数据图表话，好比:百度的 echart

3. banner 广告：Flash 曾经辉煌的时代，智能手机还不曾出现。如今以及将来的智能机时代，HTML5 技术可以在 banner 广告上发挥巨大做用，用 Canvas 实现动态的广告效果再合适不过。

4. 将来=> 模拟器：不管从视觉效果仍是核心功能方面来讲，模拟器产品能够彻底由 JavaScript 来实现。

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

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

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

8. 完整的 canvas 移动化应用

9. 咱们课程的目标

   • 咱们不是主要作游戏开发的
   • 要求必须会作基本的用 canvas 绘制的特效页面：好比，传智前端官网。
   • 会用 canvas 作一些简单的广告、活动页面

10. 咱们课程的案例和项目演示

11. canvas 的标准：

*   最新标准：[http://www.w3.org/TR/2dcontext/](http://www.w3.org/TR/2dcontext/) * 稳定版本的标准：[http://www.w3.org/TR/2013/CR-2dcontext-20130806/](http://www.w3.org/TR/2013/CR-2dcontext-20130806/) * 目前来讲，标准还在完善中。先用早期的 api 足够完成全部的应用 

2、canvas 绘图基础

2.0 sublime 配置 canvas 插件（推荐）

推荐：
    安装插件：AndyJS2
    github地址： https://github.com/malun666/AndyJS2 直接下载到：X:\Users\用户名\AppData\Roaming\Sublime Text 3\Packages 

2.1 Canvas 标签

2.1.1 canvas 标签语法和属性 （重点）

• canvas：画布油布的意思 ==英 ['kænvəs] 美 ['kænvəs] ==
• 标签名 canvas，须要进行闭合。就是一普通的 html 标签。
• 能够设置 width 和 height 属性，可是属性值单位必须是 px，不然忽略。
• width 和 hegiht：默认 300*150 像素
• 注意：
  • 不要用 CSS 控制它的宽和高,会走出图片拉伸，
  • 从新设置 canvas 标签的宽高属性会让画布擦除全部的内容。
  • 能够给 canvas 画布设置背景色

2.1.2 浏览器不兼容处理（重点）

• ie9 以上才支持 canvas, 其余 chrome、ff、苹果浏览器等都支持
• 只要浏览器兼容 canvas，那么就会支持绝大部分 api(个别最新 api 除外)
• 移动端的兼容状况很是理想，基本上随便使用
• 2d 的支持的都很是好，3d（webgl）ie11 才支持，其余都支持
• 若是浏览器不兼容，最好进行友好提示

例如：
<canvas id="cavsElem"> 你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本 </canvas> 

• 浏览器不兼容，可使用flash等手段进行优雅降级

2.2 canvas 绘图上下文 context

2.2.1 Context：Canvas 的上下文、绘制环境。（重点掌握）

• 上下文：上知天文，下知地理。是全部的绘制操做 api 的入口或者集合。
• Canvas 自身没法绘制任何内容。Canvas 的绘图是使用 JavaScript 操做的。
• Context 对象就是 JavaScript 操做 Canvas 的接口。 *使用[CanvasElement].getContext(‘2d’)来获取 2D 绘图上下文。

var canvas = document.getElementById('cavsElem'); //得到画布 var ctx = canvas.getContext('2d'); //注意：2d小写， 3d：webgl 

2.3 基本的绘制路径（重点）

2.3.1 canvas 坐标系

canvas 坐标系，从最左上角 0,0 开始。x 向右增大， y 向下增大

 

image

2.3.2 设置绘制起点(moveTo)

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

2.3.3 绘制直线(lineTo)

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

2.3.4 路径开始和闭合

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

2.3.5 描边(stroke)

* 语法：ctx.stroke(); * 解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke * stroke: （用笔等）画；轻抚；轻挪；敲击；划尾桨；划掉；（打字时）击打键盘 英 [strəʊk] 美 [strok] 

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

html 部分：

<canvas id="cavsElem"> 你的浏览器不支持canvas，请升级浏览器 </canvas> 

javascript 部分：

//===============基本绘制api==================== //得到画布 var canvas = document.querySelector('#cavsElem'); var ctx = canvas.getContext('2d'); //得到上下文 canvas.width = 900; //设置标签的属性宽高 canvas.height = 600; //千万不要用 canvas.style.height canvas.style.border = '1px solid #000'; //绘制三角形 ctx.beginPath(); //开始路径 ctx.moveTo(100, 100); //三角形，左顶点 ctx.lineTo(300, 100); //右顶点 ctx.lineTo(300, 300); //底部的点 ctx.closePath(); //结束路径 ctx.stroke(); //描边路径 

• 综合案例：02 绘制定位表格.html
• 综合案例：03 画画板.html

2.3.7 填充(fill)

* 语法：ctx.fill(); * 解释：填充，是将闭合的路径的内容填充具体的颜色。默认黑色。 * 注意：交叉路径的填充问题，“非零环绕原则”，顺逆时针穿插次数决定是否填充。 如下是非0环绕原则的原理：（了解便可，很是少会用到复杂的路径） “非零环绕规则”是这么来判断有自我交叉状况的路径的：对于路径中的任意给定区域，从该区域内部画一条足够长的线段， 使此线段的终点彻底落在路径范围以外。 图2-14中的那三个箭头所描述的就是上面这个步骤。 接下来，将计数器初始化为0， 而后，每当这条线段与路径上的直线或曲线相交时， 就改变计数器的值。若是是与路径的顺时针部分相交，则加1， 若是是与路径的逆时针部分相交，则减1。若计数器的最终值不是0，那么此区域就在路径里面，在调用fill()方法时， 浏览器就会对其进行填充。 若是最终值是0，那么此区域就不在路径内部，浏览器也就不会对其进行填充了 * 案例： 04填充矩形.html 

 

2.3.8 快速建立矩形 rect()方法

* 语法：ctx.rect(x, y, width, height); * 解释：x, y是矩形左上角坐标， width和height都是以像素计 * rect方法只是规划了矩形的路径，并无填充和描边。 * 改造案例：04填充矩形.html *rect: abbr. 矩形（rectangular）；收据（receipt） 

2.3.9 快速建立描边矩形和填充矩形

* 语法： ctx.strokeRect(x, y, width, height); - 参数跟2.3.8相同，注意此方法绘制完路径后当即进行stroke绘制 * 语法：ctx.fillRect(x, y, width, height); - 参数跟2.3.8相同， 此方法执行完成后。当即对当前矩形进行fill填充。 

2.3.10 清除矩形(clearRect)

* 语法：ctx.clearRect(x, y, width, hegiht); * 解释：清除某个矩形内的绘制的内容，至关于橡皮擦。 

2.4 绘制圆形（arc)

• 概述：arc() 方法建立弧/曲线（用于建立圆或部分圆）。

  • 语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
  • arc: 弧（度）弧形物；天穹 英 [ɑːk] 美 [ɑrk]
  • counter 反击，还击；反向移动，对着干；反驳，回答 ['kaʊntə] 美 ['kaʊntɚ]
  • 解释： - x,y：圆心坐标。 - r：半径大小。 - sAngle:绘制开始的角度。 圆心到最右边点是 0 度，顺时针方向弧度增大。 - eAngel:结束的角度，注意是弧度。π - counterclockwise：是不是逆时针。true 是逆时针，false：顺时针 - 弧度和角度的转换公式： rad = deg\*Math.PI/180;
  • 在 Math 提供的方法中sin、cos 等都使用的弧度
    [图片上传失败...(image-a5bab2-1550761584130)]

• 案例：05 绘制圆形.html

• 案例：06 绘制饼状图.html

2.5 绘制文字（会使用就能够了）

2.5.1 绘制上下文的文字属性 （有印象就好了）

• font 设置或返回文本内容的当前字体属性
  • font 属性使用的语法与 CSS font 属性相同。

例如：ctx.font = "18px '微软雅黑'";

• textAlign 设置或返回文本内容的当前对齐方式
  • start : 默认。文本在指定的位置开始。
  • end : 文本在指定的位置结束。
  • center: 文本的中心被放置在指定的位置。
  • left : 文本左对齐。
  • right : 文本右对齐。

例如：ctx.textAlign = 'left';

 

对齐图片

• textBaseline 设置或返回在绘制文本时使用的当前文本基线
  • alphabetic ： 默认。文本基线是普通的字母基线。
  • top ： 文本基线是 em 方框的顶端。。
  • hanging ： 文本基线是悬挂基线。
  • middle ： 文本基线是 em 方框的正中。
  • ideographic： 文本基线是 em 基线。
  • bottom ： 文本基线是 em 方框的底端。

例如： ctx.textBaseline = 'top'; 单词: alphabetic: 字母的；照字母次序的 [,ælfə'bɛtɪk] ideographic：表意的；表意字构成的 英 [,ɪdɪəʊ'ɡræfɪk] 美 [,ɪdɪə'græfɪk]

 

设置文字为主

 

image

2.5.2 上下文绘制文字方法

* ctx.fillText() 在画布上绘制“被填充的”文本 * ctx.strokeText() 在画布上绘制文本（无填充） * ctx.measureText() 返回包含指定文本宽度的对象 * 单词：measure 测量；估量；权衡 英 ['meʒə] 美 ['mɛʒɚ] 

//综合案例代码： ctx.moveTo(300, 300); ctx.fillStyle = 'purple'; //设置填充颜色为紫色 ctx.font = '20px "微软雅黑"'; //设置字体 ctx.textBaseline = 'bottom'; //设置字体底线对齐绘制基线 ctx.textAlign = 'left'; //设置字体对齐的方式 //ctx.strokeText( "left", 450, 400 ); ctx.fillText('Top-g', 100, 300); //填充文字 

2.5.3 案例 07 文字绘制.html

---

2.6 绘制图片（drawImage） （重点）

2.6.1 基本绘制图片的方式

context.drawImage(img,x,y); 参数说明： x,y 绘制图片左上角的坐标， img是绘制图片的dom对象。 

2.6.2 在画布上绘制图像，并规定图像的宽度和高度

context.drawImage(img,x,y,width,height);
参数说明：width 绘制图片的宽度，  height：绘制图片的高度
若是指定宽高，最好成比例，否则图片会被拉伸</em>
    等比公式：  toH = Height * toW   /  Width;  //等比 设置高 = 原高度 * 设置宽/ 原宽度; 

2.6.3 图片裁剪，并在画布上定位被剪切的部分

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 参数说明： sx,sy 裁剪的左上角坐标， swidth：裁剪图片的高度。 sheight:裁剪的高度 其余同上 

2.6.4 用 JavaScript 建立 img 对象

第一种方式：

var img = document.getElementById('imgId'); 

第二种方式：

var img = new Image(); //这个就是 img标签的dom对象 img.src = '/aicoder_vip_doc/images/arc.gif'; img.alt = '文本信息'; img.onload = function() { //图片加载完成后，执行此方法 }; 

2.6.5 面向对象基础复习补充：

• 建立对象的方式：

var o = { name: '123', age: 18 }; //json方式建立 var o = new Object(); //经过new的方式建立 var o = new Persion(); //经过类的构造函数建立 

• JS 中对象的属性建立方式

* json的方式： var o = { age: 19 }; * 直接添加属性：var o = {}; o.age = 19;//太分散了，不利于管理 * 因为js动态语言的特性，若是属性不存在的时候，直接添加属性。 * 构造函数添加属性 * 原型添加公共的属性 

• JS 的构造函数的原型 构造函数的原型就是：构造对象的模板，构造函数原型里面的全部的属性和方法都会共享给全部的 构造函数构造出来的全部实例。

   

  

2.6.6 补充 sublime 制做代码段

第一步：sublime 菜单栏 → 工具 → 制做代码段

第二步：修改输出的 sublime 代码段文本

<snippet> <content><![CDATA[ 一、这里放要tab键 输出的内容 二、 ${1:this} 占位符，tab能够进行切换，数字是切换的索引。 ：后面的是默认的文本。 ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <tabTrigger>简写的字母</tabTrigger> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet> 

第三步：保存到插件的文件夹中，后缀名为：.sublime-snippet 好比我存放的位置：
C:\Users\malunmac\AppData\Roaming\Sublime Text 3\Packages\User\snippets
snippets 是我本身新建的文件夹。

视频

配套视频请戳：https://www.bilibili.com/video/av26151775/

关注AICODER官网： https://www.aicoder.com