一、 <canvas>简介(了解)
1. 什么是canvas:
是HTML5提供的一种新标签
<canvas></canvas>
英 ['kænvəs] 美 ['kænvəs] 帆布 画布
- Canvas是一个矩形区域的画布,可以用JavaScript在上面绘画。控制其每一个像素。
- canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能。
- canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
- HTML5之前的web页面只能用一些固定样式的标签:比如p、div、h1等,但有了canvas Web页面可以可以丰富多彩。
- Canvas标签被很多的工程师认为是HTML5最伟大的改进之一,因为它可以让我们在不使用图片的情况下实现网页的图形设计。
- <canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
- Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 <canvas> 标记。
- 我们甚至可以在 IE 中使用 <canvas> 标记,并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码(由 Google 发起)来构建兼容性的画布。
- <canvas> 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进,目前 <canvas> 已经成为 HTML 5 草案中一个正式的标签。
2. <canvas>的历史
3. canvas主要应用的领域
- 游戏:canvas在基于Web的图像显示方面比Flash更加立体、更加精巧,canvas游戏在流畅度和跨平台方面更牛。
25 超棒的 HTML5 Canvas 游戏 - 可视化数据.数据图表话,比如:百度的echart
- banner广告:Flash曾经辉煌的时代,智能手机还未曾出现。现在以及未来的智能机时代,HTML5技术能够在banner广告上发挥巨大作用,用Canvas实现动态的广告效果再合适不过。
- 未来=> 模拟器:无论从视觉效果还是核心功能方面来说,模拟器产品可以完全由JavaScript来实现。
- 未来=> 远程计算机控制:Canvas可以让开发者更好地实现基于Web的数据传输,构建一个完美的可视化控制界面。
- 未来=> 图形编辑器:Photoshop图形编辑器将能够100%基于Web实现。
- 其他可嵌入网站的内容(多用于活动页面、特效):类似图表、音频、视频,还有许多元素能够更好地与Web融合,并且不需要任何插件。
- 完整的canvas移动化应用
- 我们课程的目标
- 我们不是主要做游戏开发的
- 要求必须会做基本的用canvas绘制的特效页面:比如,传智前端官网。
- 会用canvas做一些简单的广告、活动页面
- 我们课程的案例和项目演示
- canvas的标准:
- 最新标准:http://www.w3.org/TR/2dcontext/
- 稳定版本的标准:http://www.w3.org/TR/2013/CR-2dcontext-20130806/
- 目前来说,标准还在完善中。先用早期的api足够完成所有的应用
二、 <Canvas>初识(重点)
1. <canvas>的初体验:
2. <canvas>标签语法和属性
2.1 语法
<canvas></canvas>
- canvas:画布油布的意思 ==英 ['kænvəs] 美 ['kænvəs] ==
- 标签名canvas,需要进行闭合。就是一普通的html标签。
- 跟所有的html标签一样,要写在body标签之内。
- 注意:
- 不要用CSS控制它的宽和高,会让图片拉伸,
- 重新设置canvas标签的宽高属性会让画布擦除所有的内容。
- 可以给canvas画布通过style属性设置其它属性(背景色, 边框。。。。)
- width和hegiht:默认300*150像素
- ie9以上才支持canvas, 其他chrome、ff、苹果浏览器等都支持
- 只要浏览器兼容canvas,那么就会支持绝大部分api(个别最新api除外)
- 移动端的兼容情况非常理想,基本上随便使用
- 2d的支持的都非常好,3d(webgl)ie11才支持,其他都支持
- 如果浏览器不兼容,最好进行友好提示
- 得到canvas的上下文对象(是所有的绘制操作api的入口或者集合,相当于是得到画布的控制权,之后便可以通过js在画布上画内容了)
- 后面的参数是字符串的“2d”,2d表示当前的画布支持2D绘图,如果希望将当前画布支持3d,则传入”webgl”(3d在ie中只有ie11才支持,3d一般应用在3D模型和场景,这里不讨论)
2.2 注意点
3. 浏览器不兼容的处理
例如:
<canvas id="cavsElem">
你的浏览器不支持canvas,请升级浏览器.浏览器不支持,显示此行文本
</canvas>
三、 <canvas>的应用(重点)
1. 基本方法:
1.1 getContext(“2d”)
var canvas = document.getElementById( 'cavsElem' ); //获得画布
var ctx = canvas.getContext( '2d' );//注意:2d小写, 3d:webgl
2. 基本的绘制路径(重点)
2.1 canvas坐标系
canvas坐标系,从最左上角0,0开始。x向右增大, y向下增大
2.2 设置绘制起点(moveTo)
* 语法:ctx.moveTo(x, y);
* 解释:设置上下文绘制路径的起点。相当于移动画笔到某个位置
* 参数:x,y 都是相对于 canvas盒子的最左上角。
* 注意:**绘制线段前必须先设置起点,不然绘制无效。**
2.3 绘制直线(lineTo)
* 语法:ctx.lineTo(x, y);
* 解释:从x,y的位置绘制一条直线到起点或者上一个线头点。
* 参数:x,y 线头点坐标。
2.4 路径开始和闭合
* 开始路径:ctx.beginPath();
* 闭合路径:ctx.closePath();
* 解释:如果复杂路径绘制,必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。
* beginPath: 核心的作用是将 不同绘制的形状进行隔离,
每次执行此方法,表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。
2.5 描边(stroke)
* 语法:ctx.stroke();
* 解释:根据路径绘制线。路径只是草稿,真正绘制线必须执行stroke
* stroke: (用笔等)画;轻抚;轻挪;敲击;划尾桨;划掉;(打字时)击打键盘
英 [strəʊk] 美 [strok]
2.6 填充(fill)
* 语法:ctx.fill();
* 解释:填充,是将闭合的路径的内容填充具体的颜色。默认黑色。
* 注意:交叉路径的填充问题,“非零环绕原则”,顺逆时针穿插次数决定是否填充。
以下是非0环绕原则的原理:(了解即可,非常少会用到复杂的路径)
“非零环绕规则”是这么来判断有自我交叉情况的路径的:对于路径中的任意给定区域,从该区域内部画一条足够长的线段,
使此线段的终点完全落在路径范围之外。
图2-14中的那三个箭头所描述的就是上面这个步骤。
接下来,将计数器初始化为0,
然后,每当这条线段与路径上的直线或曲线相交时,
就改变计数器的值。如果是与路径的顺时针部分相交,则加1,
如果是与路径的逆时针部分相交,则减1。若计数器的最终值不是0,那么此区域就在路径里面,在调用fill()方法时,
浏览器就会对其进行填充。
如果最终值是0,那么此区域就不在路径内部,浏览器也就不会对其进行填充了
* 案例: 04填充矩形.html
2.7 路径的一些属性:
2.7.1 strokeStyle
设置路径的描边样式
2.7.2 fillStyle
设置路径的填充样式
以上两个值都可以接受颜色名,16进制数据,rgb值,甚至rgba.一般先进行设置样式然后进行绘制。
例如:
- ctx.strokeStyle = "red";
- ctx.strokeStyle = "#ccc";
- ctx.strokeStyle = "rgb(255,0,0)";
- ctx.strokeStyle = "rgba(255,0,0,6)";
2.7.3 lineWidth
设置路径的宽度
2.8 案例:表格绘制.html
3. 绘制矩形(重点)
3.1 快速创建矩形(rect)
* 语法:ctx.rect(x, y, width, height);
* 解释:x, y是矩形左上角坐标, width和height都是以像素计
* rect方法只是规划了矩形的路径,并没有填充和描边。
* 改造案例:04填充矩形.html
*rect: abbr. 矩形(rectangular);收据(receipt)
3.2 快速创建描边矩形和填充矩形(strokeRect、fillRect)
* 语法: ctx.strokeRect(x, y, width, height);
- 参数跟3.1相同,注意此方法绘制完路径后立即进行stroke绘制
* 语法:ctx.fillRect(x, y, width, height);
- 参数跟3.1相同, 此方法执行完成后。立即对当前矩形进行fill填充。
3.3 清除矩形(clearRect)
* 语法:ctx.clearRect(x, y, width, hegiht);
* 解释:清除某个矩形内的绘制的内容,相当于橡皮擦。
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等都使用的弧度
- 案例:05绘制圆形.html
- 案例:06绘制饼状图.html
5. 绘制文字(重点)
5.1 上下文绘制文字方法(重点)
5.1.1 在画布上绘制“被填充的”文本 (fillText)
* 语法:ctx.fillText(text,x,y,maxwidth);
* 解释:text是输出的文本, x, y是矩形左上角坐标, maxWidth(可选)允许的最大文本宽度,以像素计
* fillText方法在画布上绘制填色的文本。文本的默认颜色是黑色。
效果图:
5.1.2 在画布上绘制文本(strokeText)(无填充)
* 语法:ctx.strokeText(text,x,y,maxwidth);
* 解释:text是输出的文本, x, y是矩形左上角坐标, maxWidth(可选)允许的最大文本宽度,以像素计
* strokeText方法在画布上绘制文本(没有填色)。文本的默认颜色是黑色。
效果图:
5.1.3 在画布上绘制文本(measureText)(无填充)
* 语法:ctx.measureText(text).width;
* 解释:text是要得到宽度的文本
* measureText 方法返回包含一个对象,该对象包含以像素计的指定字体宽度
* 单词:measure 测量;估量;权衡 英 ['meʒə] 美 ['mɛʒɚ]
5.2 绘制上下文的文字属性 (有印象就行了)
- font 设置或返回文本内容的当前字体属性
- font 属性使用的语法与 CSS font 属性相同。
- textAlign 设置或返回文本内容的当前对齐方式
- start : 默认。文本在指定的位置开始。
- end : 文本在指定的位置结束。
- center: 文本的中心被放置在指定的位置。
- left : 文本左对齐。
- right : 文本右对齐。
例如:ctx.font = "18px '微软雅黑'";
* 例如:ctx.textAlign = 'left';
- textBaseline 设置或返回在绘制文本时使用的当前文本基线
- alphabetic : 默认。文本基线是普通的字母基线。
- top : 文本基线是 字符的顶端。。
- hanging : 文本基线是悬挂基线。
- middle : 文本基线是字符的正中。
- ideographic: 文本基线是字符基线。
- bottom : 文本基线是字符的底端。
例如: ctx.textBaseline = 'top';
单词:
alphabetic: 字母的;照字母次序的 [,ælfə'bɛtɪk]
ideographic:表意的;表意字构成的 英 [,ɪdɪəʊ'ɡræfɪk] 美 [,ɪdɪə'græfɪk]
5.3 综合案例:
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 ); //填充文字
效果图:
5.4 案例:文字绘制.html
5.5 绘制图片(重点)
5.5.1 基本绘制图片的方式
* 语法:context.drawImage(img,x,y);
* 解释:x,y 绘制图片左上角的坐标, img是绘制图片的dom对象。
5.5.2 在画布上绘制图像,并规定图像的宽度和高度
* 语法:context.drawImage(img,x,y,width,height);
* 解释:width 绘制图片的宽度, height:绘制图片的高度
* 如果指定宽高,最好成比例,不然图片会被拉伸</em>
等比公式: toH = Height * toW / Width; //等比
设置高 = 原高度 * 设置宽/ 原宽度;
5.5.3 图片裁剪,并在画布上定位被剪切的部分
* 语法:context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
* 解释:
sx,sy 裁剪的左上角坐标,
swidth:裁剪图片的高度。 sheight:裁剪的高度
其他同上
5.5.4 用JavaScript创建img对象
第一种方式:
var img = document.getElementById("imgId");
第二种方式:
var img = new Image();//这个就是 img标签的dom对象
img.src = "imgs/arc.gif";
img.alt = "文本信息";
img.onload = function() {
//图片加载完成后,执行此方法
}
五、 <canvas>补充api(其它方法):
1. Canvas颜色样式
- fillStyle : 设置或返回用于填充绘画的颜色
- strokeStyle : 设置或返回用于笔触的颜色
以上两个值都可以接受颜色名,16进制数据,rgb值,甚至rgba.一般先进行设置样式然后进行绘制。
例如:
- ctx.strokeStyle = "red";
- ctx.strokeStyle = "#ccc";
- ctx.strokeStyle = "rgb(255,0,0)";
- ctx.strokeStyle = "rgba(255,0,0,6)";
- shadowColor : 设置或返回用于阴影的颜色
- shadowBlur : 设置或返回用于阴影的模糊级别,大于1的正整数,数值越高,模糊程度越大
- shadowOffsetX: 设置或返回阴影距形状的水平距离
- shadowOffsetY: 设置或返回阴影距形状的垂直距离
2. 设置阴影(了解,少用,性能差)
示例代码:
ctx.fillStyle = "rgba(255,0,0, .9)"
ctx.shadowColor = "teal";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillRect(100, 100, 100, 100);
3. 复杂样式(了解)
3.1 创建线性渐变的样式(了解)
注意点:
- 一般不用,都是用图片代替,canvas绘制图片效率更高。
- 线性渐变可以用于 矩形、圆形、文字等颜色样式
- 线性渐变是一个对象
- ctx.createLinearGradient(x0,y0,x1,y1);
n x0:起点的横坐标
n y0:起点的纵坐标
n x1:结束点的横坐标
n y1:结束点的纵坐标
示例:
//创建线性渐变的对象,
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black"); //添加一个渐变颜色,第一个参数介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
grd.addColorStop(1,"white"); //添加一个渐变颜色
ctx.fillStyle =grd; //关键点,把渐变设置到 填充的样式
3.2 设置圆形渐变(径向渐变)(了解)
- 创建放射状/圆形渐变对象。可以填充文本、形状等
n 语法:context.createRadialGradient(x0,y0,r0,x1,y1,r1);
n x0:渐变的开始圆的横坐标
n y0:渐变的开始圆的纵坐标
n r0:渐变的开始圆的半径
n x0:渐变的结束圆的横坐标
n y0:渐变的结束圆的纵坐标
n r0:渐变的结束圆形的半径
- radial 半径的;放射状的;光线状的 英 ['reɪdɪəl] 美 ['redɪəl]
- ctx.createPattern(img,repeat) 方法在指定的方向内重复指定的元素
3.3 绘制背景图(了解)
n image :规定要使用的图片、画布或视频元素。
n repeat : 默认。该模式在水平和垂直方向重复。
其它值 :
u repeat : 默认。该模式在水平和垂直方向重复。
u repeat-x : 该模式只在水平方向重复。
u repeat-y : 该模式只在垂直方向重复。
u no-repeat: 该模式只显示一次(不重复)。
- pattern:n. 模式;图案;样品 英 ['pæt(ə)n] 美 ['pætɚn]
- scale() 方法缩放当前绘图,更大或更小
- 语法:context.scale(scalewidth,scaleheight)
3.4 变换(重点)
3.4.1 缩放(重点)
n scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
n scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)
- 注意:缩放的是整个画布,缩放后,继续绘制的图形会被放大或缩小。
- translate() 方法重新映射画布上的 (0,0) 位置
- 语法:context.translate(x,y)
3.4.2 位移画布(重点)
n x: 添加到水平坐标(x)上的值
n y: 添加到垂直坐标(y)上的值
- 注意:发生位移后,相当于把画布的0,0坐标 更换到新的x,y的位置,所有绘制的新元素都被影响。
- rotate() 方法旋转当前的绘图
- 语法:context.rotate(angle)
3.4.3 旋转(重点)
n angle: 参数是弧度(PI)
注意:如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算。
3.4.4 绘制环境保存和还原(重要)
- context.save() 保存当前环境的状态(可以把当前绘制环境进行保存到缓存中)
- context.restore() 返回之前保存过的路径状态和属性(获取最近缓存的ctx)
注意:一般配合位移画布使用。
3.4.5 设置绘制环境的透明度(了解)
- context.globalAlpha=number;
n number:透明值。必须介于 0.0(完全透明)与 1.0(不透明) 之间。
注意:设置透明度是全局的透明度的样式。注意是全局的。
3.4.6 画布限定区域绘制(了解)
- clip() 方法从原始画布中剪切任意形状和尺寸
- 语法:context.clip()
n 没有参数
注意:
² 一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。
² 一般配合绘制环境的保存和还原。
位移画布一般配合缩放和旋转等
3.4.7 画布保存base64编码内容(重要)
- toDataURL() 把canvas绘制的内容输出成base64内容。
- 语法:canvas.toDataURL(type, encoderOptions);
n type: 设置输出的类型,比如 image/png image/jpeg等
n encoderOptions: 0-1之间的数字,用于标识输出图片的质量,1表示无损压缩,类型为: image/jpeg 或者image/webp才起作用。
代码:
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
var img = document.querySelector("#img-demo");//拿到图片的dom对象
img.src = canvas.toDataURL("image/png");
3.4.8 画布渲染画布(重要)
- drawImage() 在一个画布上画
- 语法:context.drawImage(img,x,y)
n img :也可以是画布,也就是把一个画布整体的渲染到另外一个画布上。
代码:
var canvas1 = document.querySelector('#cavsElem1');
var canvas2 = document.querySelector('#cavsElem2');
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
ctx1.fillRect(20, 20, 40, 40); //在第一个画布上绘制矩形
ctx2.drawImage(canvas1, 10, 10); //将第一个画布整体绘制到第二个画布上
3.4.9 了解:线条样式(了解)
- lineCap :设置或返回线条的结束端点(线头、线冒)样式
n butt : 默认。向线条的每个末端添加平直的边缘。
u butt - 翻译.:屁股;烟头;笑柄;靶垛; 英 [bʌt] 美 [bʌt]
n round : 向线条的每个末端添加圆形线帽。
n square: 向线条的每个末端添加正方形线帽。
- lineJoin :设置或返回两条线相交时,所创建的拐角类型
n bevel: 创建斜角。
u bevel - 翻译. 斜角;斜面 英 ['bev(ə)l] 美 ['bɛvl]
n round: 创建圆角。
n miter: 默认。创建尖角
- lineWidth 设置或返回当前的线条宽度
- miterLimit 设置或返回最大斜接长度
² 意思: 斜接 英 ['maɪtə]
² 斜接长度指的是在两条线交汇处内角和外角之间的距离。
² 一般用默认值:10就可以了。除非需要特别长的尖角时,使用此属性。
3.4.10 了解贝塞尔曲线(知道有)
绘制一条二次贝塞尔曲线:
- quadraticCurveTo()二次贝塞尔曲线
- quadratic:二次方的意思, 英 [kwɒ'drætɪk] 美 [kwɑ'drætɪk]
- Curve:曲线的意思, 英 [kɜːv] 美 [kɝv]
- 语法: context.quadraticCurveTo(cpx,cpy,x,y);
参数:
² cpx: 贝塞尔控制点的 x 坐标
² cpy: 贝塞尔控制点的 y 坐标
² x : 结束点的 x 坐标
² y : 结束点的 y 坐标
ctx.beginPath();
ctx.moveTo(20,20);
//绘制2次方曲线,贝赛尔曲线
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
绘制一条三次贝塞尔曲线
- bezierCurveTo():绘制一条三次贝塞尔曲线
- 语法: context.quadraticCurveTo(cpx,cpy,x,y);
参数:
² cp1x: 第一个贝塞尔控制点的 x 坐标
² cp1y: 第一个贝塞尔控制点的 y 坐标
² cp2x: 第二个贝塞尔控制点的 x 坐标
² cp2y: 第二个贝塞尔控制点的 y 坐标
² x : 结束点的 x 坐标
² y : 结束点的 y 坐标
//绘制复杂的贝塞尔曲线
ctx.beginPath();
ctx.moveTo(400,400);
//参数说明:context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
// cp1x: 第一个贝塞尔控制点的 x 坐标
// cp1y: 第一个贝塞尔控制点的 y 坐标
// cp2x: 第二个贝塞尔控制点的 x 坐标
// cp2y: 第二个贝塞尔控制点的 y 坐标
// x: 结束点的 x 坐标
// y: 结束点的 y 坐标
ctx.bezierCurveTo(500, 200, 600, 600, 700, 300);
ctx.stroke();
3.4.11 了解创建两条切线的弧(知道有)
- arcTo在画布上创建介于当前起点和两个点形成的夹角的切线之间的弧
- quadratic:二次方的意思, 英 [kwɒ'drætɪk] 美 [kwɑ'drætɪk]
- Curve:曲线的意思, 英 [kɜːv] 美 [kɝv]
- 语法: context.arcTo(x1,y1,x2,y2,r); //类比:css3中的圆角。
参数:
² x1: 弧的端点1的 x 坐标
² y1: 弧的端点1的 y 坐标
² x2: 弧的端点2(终点)的 x 坐标
² y2: 弧的端点2(终点)的 y 坐标
² r : 弧的半径
代码:
ctx.beginPath();
ctx.moveTo(20,20);
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
//context.arcTo(x1,y1,x2,y2,r); //类比:css3中的圆角。
ctx.arcTo(240, 100, 240, 110, 40);
ctx.lineTo(240, 300);
ctx.stroke();
3.4.12 了解判断点是否在路径中(知道有)
- context.isPointInPath(x,y);
//isPointInPath() 方法返回 true,如果指定的点位于当前路径中;否则返回 false。
//判断x,y坐标的点是否在当前的路径中。
3.4.13 了解文本宽度计算(知道有)
- context.measureText(text).width;
- setTransform() 将当前转换重置为单位矩阵。然后运行 transform()
- transform() 替换绘图的当前转换矩阵
- globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
- 像素操作
3.5 如果以后做canvas游戏方向开发深入学习可以扩展内以下容:
六、 konva库的学习:
在开发过程中,为了提高开发效率。简化开发过程,通常会用一些别人封装好的一些库来编写代码。konva就是其中一个。
1. Konva的整体理念
- 舞台的概念的引入。整个视图看做是一个舞台 stage
- 舞台中可以绘制很多个层 layer
- layer下面可以有很多的group
- group下面可以有 矩形、图片、其他形状等
- 参看:快速上手文档---查看翻译文档
- https://konvajs.github.io/