canvas画布,不容小觑的“标签”,得有一定的数学几何底子,虽然目前我还是没用到就是了,但是以后总该会用到的,有想过利用canvas制作小游戏_〆(´Д` )
canvas画布,顾名思义即是如图所示绘图的“工具”,然而并不简单(lll¬ω¬)~
最近毛毛的《奉献》特别耐人寻味,有跟原版不一样的感觉~
canvas简介 什么是canvas?(了解)
1 2 <canvas > </canvas > 英 ['kænvəs] 美 [' kænvəs] 帆布 画布
Canvas是一个矩形区域的画布,可以用JavaScript在上面绘画。控制其每一个像素。
canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
HTML5之前的web页面只能用一些固定样式的标签:比如p、div、h1等
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的标准:
canvas绘图基础 sublime配置canvas插件(推荐) 1 2 3 4 推荐: 安装插件:AndyJS2 github地址: https://github.com/malun666/AndyJS2 直接下载到:X:\U sers\用 户名\A ppData\R oaming\S ublime Text 3\P ackages
Canvas标签 canvas标签语法和属性 (重点)
canvas:画布油布的意思 ==英 [‘kænvəs] 美 [‘kænvəs] ==
标签名canvas,需要进行闭合。就是一普通的html标签。
可以设置width和height属性,但是属性值单位必须是px ,否则忽略。
width和hegiht:默认300*150像素
注意:
不要用CSS控制它的宽和高,会走出图片拉伸,
重新设置canvas标签的宽高属性会让画布擦除所有的内容。
可以给canvas画布设置背景色
浏览器不兼容处理(重点)
ie9以上才支持canvas, 其他chrome、ff、苹果浏览器等都支持
只要浏览器兼容canvas,那么就会支持绝大部分api(个别最新api除外)
移动端的兼容情况非常理想,基本上随便使用
2d的支持的都非常好,3d(webgl)ie11才支持,其他都支持
如果浏览器不兼容,最好进行友好提示
1 2 3 4 例如: <canvas id ="cavsElem" > 你的浏览器不支持canvas,请升级浏览器.浏览器不支持,显示此行文本 </canvas >
浏览器不兼容,可以使用flash 等手段进行优雅降级
canvas绘图上下文context Context:Canvas的上下文、绘制环境。(重点掌握)
上下文:上知天文,下知地理。是所有的绘制操作api的入口或者集合。
Canvas自身无法绘制任何内容。Canvas的绘图是使用JavaScript操作的。
Context对象就是JavaScript操作Canvas的接口。 *使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文。
1 2 var canvas = document .getElementById( 'cavsElem' ); var ctx = canvas.getContext( '2d' );
基本的绘制路径(重点) canvas坐标系 1 canvas坐标系,从最左上角0 ,0 开始。x向右增大, y向下增大
设置绘制起点(moveTo) 1 2 3 4 * 语法:ctx.moveTo(x, y); * 解释:设置上下文绘制路径的起点。相当于移动画笔到某个位置* 参数:x,y 都是相对于 canvas盒子的最左上角。* 注意:**绘制线段前必须先设置起点,不然绘制无效。* *
绘制直线(lineTo) 1 2 3 * 语法:ctx.lineTo(x, y);* 解释:从x,y的位置绘制一条直线到起点或者上一个线头点。* 参数:x,y 线头点坐标。
路径开始和闭合 1 2 3 4 5 * 开始路径:ctx.beginPath();* 闭合路径:ctx.closePath();* 解释:如果复杂路径绘制,必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。* beginPath: 核心的作用是将 不同绘制的形状进行隔离, 每次执行此方法,表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。
描边(stroke) 1 2 3 4 * 语法: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();
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 html部分: <canvas id="cavsElem" > 你的浏览器不支持canvas,请升级浏览器 </canvas> javascript部分: var canvas = document.querySelector('#cavsElem'); var ctx = canvas.getContext('2 d'); canvas.width = 900 ; canvas.height = 600 ; 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
填充(fill) 1 2 * 语法:ctx.fill(); * 解释:填充,是将闭合的路径的内容填充具体的颜色。默认黑色。
1 2 3 4 5 6 7 8 9 10 11 12 13 * 注意:交叉路径的填充问题,“非零环绕原则”,顺逆时针穿插次数决定是否填充。 以下是非0 环绕原则的原理:(了解即可,非常少会用到复杂的路径) “非零环绕规则”是这么来判断有自我交叉情况的路径的:对于路径中的任意给定区域,从该区域内部画一条足够长的线段, 使此线段的终点完全落在路径范围之外。 图2 -14 中的那三个箭头所描述的就是上面这个步骤。 接下来,将计数器初始化为0 , 然后,每当这条线段与路径上的直线或曲线相交时, 就改变计数器的值。如果是与路径的顺时针部分相交,则加1 , 如果是与路径的逆时针部分相交,则减1 。若计数器的最终值不是0 ,那么此区域就在路径里面,在调用fill()方法时, 浏览器就会对其进行填充。 如果最终值是0 ,那么此区域就不在路径内部,浏览器也就不会对其进行填充了 * 案例: 04 填充矩形.html
快速创建矩形rect()方法 1 2 3 4 5 * 语法:ctx.rect (x, y, width , height ); * 解释:x, y是矩形左上角坐标, width 和height 都是以像素计 * rect 方法只是规划了矩形的路径,并没有填充和描边。 * 改造案例:04 填充矩形.html *rect : abbr. 矩形(rectangular);收据(receipt)
快速创建描边矩形和填充矩形 1 2 3 4 * 语法: ctx.strokeRect(x, y, width , height ); - 参数跟2.3 .8 相同,注意此方法绘制完路径后立即进行stroke 绘制 * 语法:ctx.fillRect(x, y, width , height ); - 参数跟2.3 .8 相同, 此方法执行完成后。立即对当前矩形进行fill 填充。
清除矩形(clearRect) 1 2 * 语法:ctx.clearRect(x, y, width, hegiht);* 解释:清除某个矩形内的绘制的内容,相当于橡皮擦。
绘制圆形(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
绘制文字(会使用就可以了) 绘制上下文的文字属性 (有印象就行了)
font 设置或返回文本内容的当前字体属性
font 属性使用的语法与 CSS font 属性相同。
1 例如:ctx.font = "18px '微软雅黑'"
textAlign 设置或返回文本内容的当前对齐方式
start : 默认。文本在指定的位置开始。
end : 文本在指定的位置结束。
center: 文本的中心被放置在指定的位置。
left : 文本左对齐。
right : 文本右对齐。
1 * 例如:ctx.textAlign = 'left' ;
textBaseline 设置或返回在绘制文本时使用的当前文本基线
alphabetic : 默认。文本基线是普通的字母基线。
top : 文本基线是 em 方框的顶端。。
hanging : 文本基线是悬挂基线。
middle : 文本基线是 em 方框的正中。
ideographic: 文本基线是em基线。
bottom : 文本基线是 em 方框的底端。
1 2 3 4 例如: ctx.textBaseline = 'top'; 单词: alphabetic: 字母的;照字母次序的 [,ælfə'bɛtɪk] ideographic:表意的;表意字构成的 英 [,ɪdɪəʊ'ɡræfɪk] 美 [,ɪdɪə'græfɪk]
上下文绘制文字方法 1 2 3 4 * ctx .fillText () 在画布上绘制“被填充的”文本 * ctx .strokeText () 在画布上绘制文本(无填充) * ctx .measureText () 返回包含指定文本宽度的对象 * 单词:measure 测量;估量;权衡 英 ['meʒə] 美 ['mɛʒɚ]
1 2 3 4 5 6 7 8 ctx.moveTo( 300 , 300 ); ctx.fillStyle = "purple" ; ctx.font = '20 px "微软雅黑" '; ctx.textBaseline = "bottom" ; ctx.textAlign = "left" ; ctx.fillText( "Top-g" , 100 , 300 );
绘制图片(drawImage) (重点) 基本绘制图片的方式 1 2 context.drawImage(img,x ,y)
在画布上绘制图像,并规定图像的宽度和高度 1 2 3 4 5 context.drawImage(img,x,y,width ,height ); 参数说明:width 绘制图片的宽度, height :绘制图片的高度 如果指定宽高,最好成比例,不然图片会被拉伸</em> 等比公式: toH = Height * toW / Width; 设置高 = 原高度 * 设置宽/ 原宽度;
图片裁剪,并在画布上定位被剪切的部分 1 2 3 4 5 context .drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 参数说明: sx,sy 裁剪的左上角坐标, swidth:裁剪图片的高度。 sheight:裁剪的高度 其他同上
用JavaScript创建img对象 1 2 3 4 5 6 7 8 9 第一种方式: var img = document .getElementById("imgId" ); 第二种方式: var img = new Image(); img.src = "imgs/arc.gif" ; img.alt = "文本信息" ; img.onload = function ( ) { }
面向对象基础复习补充:
1 2 3 * var o = { name: '123' , age: 18 }; * var o = new Object (); * var o = new Persion();
1 2 3 4 5 * json的方式: var o = { age: 19 };* 直接添加属性:var o = {}; o.age = 19;//太分散了,不利于管理* 由于js动态语言的特性,如果属性不存在的时候,直接添加属性。* 构造函数添加属性* 原型添加公共的属性
JS的构造函数的原型 构造函数的原型就是:构造对象的模板,构造函数原型里面的所有的属性和方法都会共享给所有的 构造函数构造出来的所有实例。
补充 sublime制作代码段(推荐–已结讲过了) 第一步:sublime菜单栏→ 工具 → 制作代码段
第二步:修改输出的sublime代码段文本
1 2 3 4 5 6 7 8 9 10 11 <snippet > <content > <![CDATA[ 1、这里放要tab键 输出的内容 2、 $ {1:this} 占位符,tab可以进行切换,数字是切换的索引。 :后面的是默认的文本。 ]]></content > <tabTrigger > 简写的字母</tabTrigger > </snippet >
第三步:保存到插件的文件夹中,后缀名为:.sublime-snippet 比如我存放的位置: C:\Users\malunmac\AppData\Roaming\Sublime Text 3\Packages\User\snippetssnippets是我自己新建的文件夹。
canvas进阶 Canvas颜色样式和阴影 设置填充和描边的颜色(掌握)
fillStyle : 设置或返回用于填充绘画的颜色
strokeStyle: 设置或返回用于笔触的颜色
以上两个值都可以接受颜色名,16进制数据,rgb值,甚至rgba. 一般先进行设置样式然后进行绘制。
1 2 3 4 5 例如: ctx.strokeStyle = "red" ctx.strokeStyle = "#ccc" ctx.strokeStyle = "rgb(255,0,0)" ctx.strokeStyle = "rgba(255,0,0,6)"
设置阴影(了解,少用,性能差)
类比于CSS3的阴影。
shadowColor : 设置或返回用于阴影的颜色
shadowBlur : 设置或返回用于阴影的模糊级别,大于1的正整数,数值越高,模糊程度越大
shadowOffsetX: 设置或返回阴影距形状的水平距离
shadowOffsetY: 设置或返回阴影距形状的垂直距离
1 2 3 4 5 6 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 )
例如:
案例: 12设置box盒子阴影.html
设置png图片的阴影,图片透明部分不会被投影。
复杂样式(了解) 创建线性渐变的样式(了解)
一般不用,都是用图片代替,canvas绘制图片效率更高。
线性渐变可以用于 矩形、圆形、文字等颜色样式
线性渐变是一个对象
语法:ctx.createLinearGradient(x0,y0,x1,y1); //参数:x0,y0起始坐标,x1,y1结束坐标
1 2 3 4 5 6 例如: var grd=ctx.createLinearGradient(0 ,0 ,170 ,0 ); grd.addColorStop(0 ,"black" ); grd.addColorStop(1 ,"white" ); ctx.fillStyle =grd;
案例13设置线性渐变.html
设置圆形渐变(径向渐变) 了解
创建放射状/圆形渐变对象。可以填充文本、形状等
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
radial 半径的;放射状的;光线的;光线状的 英 [‘reɪdɪəl] 美 [‘redɪəl]
参数详解:
x0: 渐变的开始圆的 x 坐标
y0: 渐变的开始圆的 y 坐标
r0: 开始圆的半径
x1: 渐变的结束圆的 x 坐标
y1: 渐变的结束圆的 y 坐标
r1: 结束圆的半径
1 2 3 4 5 6 var rlg = ctx.createRadialGradient(300 ,300 ,10 ,300 ,300 ,200 ); rlg.addColorStop(0 , 'teal'); rlg.addColorStop(.4 , 'navy'); rlg.addColorStop(1 , 'purple'); ctx.fillStyle = rlg; ctx.fillRect(100 , 100 , 500 , 500 );
绘制背景图(了解)
ctx.createPattern(img,repeat) 方法在指定的方向内重复指定的元素了解
pattern:n. 模式;图案;样品 英 [‘pæt(ə)n] 美 [‘pætɚn]
第一参数:设置平铺背景的图片,第二个背景平铺的方式。
image : 规定要使用的图片、画布或视频元素。
repeat : 默认。该模式在水平和垂直方向重复。
repeat-x : 该模式只在水平方向重复。
repeat-y : 该模式只在垂直方向重复。
no-repeat: 该模式只显示一次(不重复)。
1 2 3 4 5 6 var ctx=c.getContext("2d" ) var img=document.getElementById("lamp" ) var pat=ctx.createPattern(img,"repeat" ) ctx.rect(0 ,0 ,150 ,100 ) ctx.fillStyle=pat ctx.fill()
变换(重点) 缩放(重点)
scale() 方法缩放当前绘图,更大或更小
语法:context.scale(scalewidth,scaleheight)
scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) +注意:缩放的是整个画布,缩放后,继续绘制的图形会被放大或缩小。
案例16缩放案例.html
位移画布(重点)
ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置
参数说明:
x: 添加到水平坐标(x)上的值
y: 添加到垂直坐标(y)上的值
发生位移后,相当于把画布的0,0坐标 更换到新的x,y的位置,所有绘制的新元素都被影响。
位移画布一般配合缩放和旋转等。
案例: 17位移画布.html
旋转(重点)
context.rotate(angle); 方法旋转当前的绘图
注意参数是弧度(PI)
如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算。
案例:18旋转画布.html
绘制环境保存和还原(重要)
ctx.save() 保存当前环境的状态
ctx.restore() 返回之前保存过的路径状态和属性
一般配合位移画布使用。
案例: 19矩形旋转案例.html
设置绘制环境的透明度(了解)
context.globalAlpha=number;
number:透明值。必须介于 0.0(完全透明) 与 1.0(不透明) 之间。
设置透明度是全局的透明度的样式。注意是全局的。
画布限定区域绘制(了解)
ctx.clip(); 方法从原始画布中剪切任意形状和尺寸
一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)
一般配合绘制环境的保存和还原。
画布保存base64编码内容(重要)
把canvas绘制的内容输出成base64内容。
语法:canvas.toDataURL(type, encoderOptions);
例如:canvas.toDataURL(“image/jpg”,1);
参数说明:
type,设置输出的类型,比如 image/png image/jpeg等
encoderOptions: 0-1之间的数字,用于标识输出图片的质量,1表示无损压缩,类型为: image/jpeg 或者image/webp才起作用。
1 2 3 4 5 6 7 8 9 案例1 : var canvas = document .getElementById("canvas" );var dataURL = canvas.toDataURL();console.log(dataURL); var img = document .querySelector ("#img-demo" );img.src = canvas.toDataURL("image/png" );
画布渲染画布(重要)
context.drawImage(img,x,y);
img参数也可以是画布,也就是把一个画布整体的渲染到另外一个画布上。
1 2 3 4 5 6 7 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 );
了解:线条样式(了解)
lineCap 设置或返回线条的结束端点(线头、线冒)样式
butt : 默认。向线条的每个末端添加平直的边缘。
翻译.:屁股;烟头;笑柄;靶垛;粗大的一端 英 [bʌt] 美 [bʌt]
round : 向线条的每个末端添加圆形线帽。
square: 向线条的每个末端添加正方形线帽。 参考:23线的样式.html
lineJoin 设置或返回两条线相交时,所创建的拐角类型
bevel: 创建斜角。
翻译. 斜角;斜面;[测] 斜角规 英 [‘bev(ə)l] 美 [‘bɛvl]
round: 创建圆角。
miter: 默认。创建尖角
lineWidth 设置或返回当前的线条宽度
miterLimit 设置或返回最大斜接长度
意思: 斜接 英 [‘maɪtə]
斜接长度指的是在两条线交汇处内角和外角之间的距离。
一般用默认值:10就可以了。除非需要特别长的尖角时,使用此属性。
了解贝塞尔曲线(知道有) 绘制一条二次方曲线。
微软的画图板中的曲线的颜色。
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 坐标
1 2 3 4 5 ctx.beginPath(); ctx.moveTo(20 ,20 ); ctx.quadraticCurveTo(20 ,100 ,200 ,20 ); ctx.stroke();
绘制贝塞尔曲线(知道有)
绘制一条三次贝塞尔曲线
语法:context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
提示:三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点,第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
参数说明:
cp1x: 第一个贝塞尔控制点的 x 坐标
cp1y: 第一个贝塞尔控制点的 y 坐标
cp2x: 第二个贝塞尔控制点的 x 坐标
cp2y: 第二个贝塞尔控制点的 y 坐标
x: 结束点的 x 坐标
y: 结束点的 y 坐标
1 2 3 4 5 6 7 8 9 10 11 12 ctx.beginPath(); ctx.moveTo(400 ,400 ); ctx.bezierCurveTo(500 , 200 , 600 , 600 , 700 , 300 ); ctx.stroke();
案例:25绘制贝塞尔曲线.html
了解创建两条切线的弧(知道有)
在画布上创建介于当前起点和两个点形成的夹角的切线之间的弧
语法: context.arcTo(x1,y1,x2,y2,r); //类比:css3中的圆角。
例如: ctx.arcTo(240, 100, 240, 110, 40);
参数:
x1: 弧的端点1的 x 坐标
y1: 弧的端点1的 y 坐标
x2: 弧的端点2(终点)的 x 坐标
y2: 弧的端点2(终点)的 y 坐标
r : 弧的半径
1 2 3 4 5 6 7 8 ctx.beginPath(); ctx.moveTo(100 ,100 ); ctx.lineTo(200 ,100 ); ctx.arcTo(240 , 100 , 240 , 110 , 40 ); ctx.lineTo(240 , 300 ); ctx.stroke();
了解判断点是否在路径中(知道有) 1 2 3 context.isPointInPath(x,y) ; //isPointInPath () 方法返回 true ,如果指定的点位于当前路径中;否则返回 false 。// 判断x,y坐标的点是否在当前的路径中。
了解文本宽度计算(知道有) 1 context .measureText(text ).width ;
如果以后做canvas游戏方向开发深入学习可以扩展内以下容:
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()
transform() 替换绘图的当前转换矩阵
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
像素操作
Canvas开发库封装 封装常用的绘制函数 封装一个矩形 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 1 、矩形的 x、y坐标2 、矩形的宽高3 、矩形的边框的线条样式、线条宽度4 、矩形填充的样式5 、矩形的旋转角度6 、矩形的缩小放大function ItcastRect( option ) { this ._init(option); } ItcastRect.prototype = { _init: function( option ) { option = option || {}; this .x = option.x === 0 ? 0 : option.x || 100 ; this .y = option.y === 0 ? 0 : option.y || 100 ; this .w = option.w || 100 ; this .h = option.h || 100 ; this .angle = option.angle === 0 ? 0 : option.angle || 0 ; this .fillStyle = option.fillStyle || 'silver' ; this .strokeStyle = option.strokeStyle || 'red' ; this .strokeWidth = option.strokeWidth || 4 ; this .scaleX = option.scaleX || 1 ; this .scaleY = option.Y || 1 ; }, render: function( ctx ) { ctx.save(); ctx.translate( this .x, this .y ); ctx.rotate( this .angle * Math.PI / 180 ); ctx.scale( this .scaleX, this .scaleY ); ctx.fillStyle = this .fillStyle; ctx.fillRect( 0 , 0 , this .w, this .h ); ctx.lineWidth = this .strokeWidth; ctx.strokeStyle = this .strokeStyle; ctx.strokeRect( 0 ,0 ,this .w,this .h ); ctx.restore(); }, constructor : ItcastRect };
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 function ItcastCircle( option ) { this ._init( option ); } ItcastCircle.prototype = { _init: function( option ) { option = option || {}; this .x = option.x === 0 ? 0 : option.x || 100 ; this .y = option.y === 0 ? 0 : option.y || 100 ; this .w = option.w || 100 ; this .h = option.h || 100 ; this .angle = option.angle === 0 ? 0 : option.angle || 0 ; this .fillStyle = option.fillStyle || 'silver' ; this .strokeStyle = option.strokeStyle || 'red' ; this .strokeWidth = option.strokeWidth || 4 ; this .scaleX = option.scaleX || 1 ; this .scaleY = option.Y || 1 ; this .opactity = option.opactity || 1 ; this .counterclockwise = option.counterclockwise === true ? true : option.counterclockwise || false ; this .startAngle = option.startAngle == 0 ? 0 : option.startAngle || 0 ; this .endAngle = option.endAngle == 0 ? 0 : option.endAngle || 0 ; this .startAngle = this .startAngle * Math.PI/180 ; this .endAngle = this .endAngle * Math.PI / 180 ; this .r = option.r || 100 ; }, render: function( ctx ) { ctx.save(); ctx.translate( this .x, this .y); ctx.scale( this .scaleX, this .scaleY ); ctx.rotate( this .agnle * Math.PI / 180 ); ctx.globalAlpha = this .opacity; ctx.fillStyle = this .fillStyle; ctx.strokeStyle = this .strokeStyle; ctx.moveTo(0 , 0 ); ctx.arc( 0 , 0 , this .r, this .startAngle, this .endAngle, this .counterclockwise); ctx.fill(); ctx.stroke(); ctx.restore(); }, constructor : ItcastCircle };
第三方库使用
1 https:// roopons.com.au/wp-content/ plugins/viral-optins/ js/rgraph/
1 https: //www.egret-labs.org /
Konva的使用快速上手 Konva的整体理念
舞台的概念的引入。整个视图看做是一个舞台 stage
舞台中可以绘制很多个层 layer
layer下面可以有很多的group
group下面可以有 矩形、图片、其他形状等
参看:快速上手文档—查看翻译文档
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Stage | +------+------+ | | Layer Layer | | +-----+-----+ Shape | | Group Group | | + +---+---+ | | | Shape Group Shape | + | Shape
Konva矩形案例 创建一个矩形: Konva.Rect(option); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 var stage = new Konva.Stage({ container: 'container' , width : window.innerWidth, height : window.innerHeight }); var layer = new Konva.Layer(); stage.add (layer); var rect = new Konva.Rect({ x: 100 , y: 100 , width : 100 , height : 100 , fill : 'gold' , stroke : 'navy' , strokeWidth: 4 , opactity: .2 , scale : 1.2 , rotation: 30 , cornerRadius: 10 , id: 'rect1' , name: 'rect' , draggable: true }); var group = new Konva.Group({ x: 40 , y: 40 , }); group.add ( rect ); layer.add ( group ); layer.draw ();
Konva的动画系统 tween对象(重点)
tween,英文意思:两者之间, 英 [twiːn] 美 [twin]
tween是控制Konva对象进行动画的核心对象。
tween可以控制所有数字类型的属性进行动画处理,比如:x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX等
1 2 3 4 5 6 7 8 9 10 11 12 13 14 var tween = new Konva.Tween({ node: rect, x: 300 , opacity: .8 , duration: 1 , easing: Konva.Easings.EaseIn, yoyo: true, onFinish: function() { } }); tween.play();
tween的控制方法
tween.play(), //播放动画
tween.pause(), //暂停动画
tween.reverse(), //动画逆播放
tween.reset(), //重置动画
tween.finish(), //立即结束动画
seek:英文:寻找 英 [siːk] 美 [sik]
tween的缓动控制选项
Konva.Easings.Linear //线性
Konva.Easings.EaseIn //缓动,先慢后快
Konva.Easings.EaseOut //先快后慢
Konva.Easings.EaseInOut //两头慢,中间快
Konva.Easings.BackEaseIn //往回来一点,然后往前冲,汽车启动类似…
Konva.Easings.BackEaseOut
Konva.Easings.BackEaseInOut
Konva.Easings.ElasticEaseIn //橡皮筋 英 [ɪ’læstɪk] 美 [ɪ’læstɪk]
Konva.Easings.ElasticEaseOut
Konva.Easings.ElasticEaseInOut
Konva.Easings.BounceEaseIn //弹跳;弹起,反跳;弹回 英 [baʊns] 美 [baʊns]
Konva.Easings.BounceEaseOut
Konva.Easings.BounceEaseInOut
Konva.Easings.StrongEaseIn //强力
Konva.Easings.StrongEaseOut
Konva.Easings.StrongEaseInOut
动画效果参考: 29Konva动画缓动效果案例.html
动画to的使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 var rect = new Konva.Rect({ x: 10 , y: 10 , width : 100 , height : 100 , fill : 'red' }); layer.add (rect ); layer.draw (); rect .to({ x: 100 , y: 100 , opactity: .1 , duration: 3 , onFinish: function() { } });
Animate的应用
Animation动画,实际上就是浏览器通知开发者进行绘制,并提供当前的时间
1 2 3 4 5 6 7 8 9 10 11 12 13 var anim = new Konva.Animation(function (frame) { var time = frame.time, timeDiff = frame.timeDiff, frameRate = frame.frameRate; }, layer); anim.start();
循环播放动画的实现 1 2 3 4 5 6 7 8 9 10 11 12 13 var loopTween = new Konva.Tween({ node: star, rotation: 360 , duration: 2 , easing: Konva.Easings.Linear, onFinish: function () { this .reset(); this .play(); } }); loopTween.play();
回放且循环播放动画
yoyo属性可以进行对动画进行播放完后,回放当前动画,并持续循环来回切换播放。
1 2 3 4 5 rect .to ({ duration : 2 , scale: 1.5 , yoyo: true// 此设置也可以用于 tween });
进度条案例 传智官网案例
三角函数的补充
Math.sin(弧度); //夹角对面的边 和 斜边的比值
Math.cos(弧度); //夹角侧边 与斜边的比值
圆形上面的点的坐标的计算公式
x =x0 + Math.cos(rad) * R;//x0和y0是圆心点坐标
y =y0 + Math.sin(rad) * R;//注意都是弧度
group的灵活运用
konva的group很灵活,每个group都有自己的坐标系
group可以包含其他的group,可以对group做整个组的动画
group可以通过getChidren();//可以拿到直接子级元素。
1 2 3 4 5 var group = new Konva.Group({ x: 0, y: 0 }); group.add (rect);
Konva的事件(重要) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 var rect = new Konva.Rect({ x : 100 , y : 100 , fill : 'red' , width : 200 , height : 200 }); rect .on('click' , function ( ) { console .log('^_^ ^_^' ); }); rect .on('click mousemove' ,function (e ) {}); rect .off('click' ); rect .fire('click' );rect .on('click' , function (evt ) { alert('You clicked the circle!' ); evt.cancelBubble = true ; });
Konva的选择器
选择方法。
ID选择法:stage.find(‘#id’); //此方法返回的是一个数组
name选择法:group.findOne(‘.name’);//返回一个Konva对象
type选择法: group.find(‘Circle’);//查找所有的圆形Konva对象
1 2 3 4 groupCircle.find('Circle' ).each(function ( circle, index ) );
饼状图案例
柱状图案例
histogram n. [统计] 直方图;柱状图 英 [‘hɪstəgræm] 美 [‘hɪstəɡræm]
Canvas项目实战 Canvas优化