一、canvas简介
1.1 什么是canvas?(了解)
· 是HTML5提供的一种新标签
<canvas></canvas>
英 ['kænvəs] 美 ['kænvəs] 帆布 画布
· Canvas是一个矩形区域的画布,可以用JavaScript在上面绘画。控制其每一个像素。
· canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能。
· canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
· HTML5之前的web页面只能用一些固定样式的标签:比如p、div、h1等,但有了canvas Web页面可以可以丰富多彩。
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. 我们课程的目标
o 我们不是主要做游戏开发的
o 要求必须会做基本的用canvas绘制的特效页面:比如,传智前端官网。
o 会用canvas做一些简单的广告、活动页面
10. 我们课程的案例和项目演示
11. canvas的标准:
o 最新标准:http://www.w3.org/TR/2dcontext/
o 稳定版本的标准:http://www.w3.org/TR/2013/CR-2dcontext-20130806/
o 目前来说,标准还在完善中。先用早期的api足够完成所有的应用
二、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像素
· 注意:
o 不要用CSS控制它的宽和高,会走出图片拉伸,
o 重新设置canvas标签的宽高属性会让画布擦除所有的内容。
o 可以给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向下增大
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绘制的基本步骤:
o 第一步:获得上下文 =>canvasElem.getContext('2d');
o 第二步:开始路径规划 =>ctx.beginPath()
o 第三步:移动起始点 =>ctx.moveTo(x, y)
o 第四步:绘制线(矩形、圆形、图片...) =>ctx.lineTo(x, y)
o 第五步:闭合路径 =>ctx.closePath();
o 第六步:绘制描边 =>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,那么此区域就不在路径内部,浏览器也就不会对其进行填充了
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() 方法创建弧/曲线(用于创建圆或部分圆)。
o 语法:ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
o arc: 弧(度)弧形物;天穹 英 [ɑːk] 美 [ɑrk]
o counter 反击,还击;反向移动,对着干;反驳,回答 ['kaʊntə] 美 ['kaʊntɚ]
o 解释:
§ x,y:圆心坐标。
§ r:半径大小。
§ sAngle:绘制开始的角度。 圆心到最右边点是0度,顺时针方向弧度增大。
§ eAngel:结束的角度,注意是弧度。π
§ counterclockwise:是否是逆时针。true是逆时针,false:顺时针
§ 弧度和角度的转换公式: rad = deg*Math.PI/180;
§ 在Math提供的方法中sin、cos等都使用的弧度
· 案例:05绘制圆形.html
· 案例:06绘制饼状图.html
2.5 绘制文字(会使用就可以了)
2.5.1 绘制上下文的文字属性 (有印象就行了)
· font 设置或返回文本内容的当前字体属性
o font 属性使用的语法与 CSS font 属性相同。
例如:ctx.font = "18px '微软雅黑'";
· textAlign 设置或返回文本内容的当前对齐方式
o start : 默认。文本在指定的位置开始。
o end : 文本在指定的位置结束。
o center: 文本的中心被放置在指定的位置。
o left : 文本左对齐。
o right : 文本右对齐。
* 例如:ctx.textAlign = 'left';
· textBaseline 设置或返回在绘制文本时使用的当前文本基线
o alphabetic : 默认。文本基线是普通的字母基线。
o top : 文本基线是 em 方框的顶端。。
o hanging : 文本基线是悬挂基线。
o middle : 文本基线是 em 方框的正中。
o ideographic: 文本基线是em基线。
o bottom : 文本基线是 em 方框的底端。
例如: ctx.textBaseline = 'top';
单词:
alphabetic: 字母的;照字母次序的 [,ælfə'bɛtɪk]
ideographic:表意的;表意字构成的 英 [,ɪdɪəʊ'ɡræfɪk] 美 [,ɪdɪə'græfɪk]
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 = "imgs/arc.gif";
img.alt = "文本信息";
img.onload = function() {
//图片加载完成后,执行此方法
}