欢迎访问我的个人博客：
其实canvas本身很简单，就是去学习它的API，多看实例，多自己动手练习，多总结。但是canvas的API实在是有点多，对于初学者来说，可能学到一半就止步不前了。我也有这种感觉，在学习的过程中，编写实例，用到了其中很多的属性和方法，但是回头来看的时候总觉得什么也没用。所以决定系统性的记录一下它常用到的API，方便以后查阅，也顺便造福一下大家。
另外：附一个之前学习的时候自己跟着教程写的一个小游戏：
假设html代码中有一个canvas标签：
&canvas id=&canvas&&你的浏览器不支持canvas！&/canvas&
如果你的浏览器是IE8及以下，那么很遗憾，上面那段文字会被渲染出来！而且下面的方法也都不能使用了；所以请使用支持canvas的浏览器来使用后面的方法。
//获取canvas容器
var can = document.getElementById(‘canvas’);
//创建一个画布
var ctx = can.getContext(‘2d’);
另外我们可以还可以得到容器的宽和高度
var canWid = can.width;
//canvas 的宽度
var canHei = can.height;
//canvas 的高度
canvas只是一个容器，本身没有绘制的能力，所以我们要得到一个画布ctx，使之具有绘制各种图形的能力。下文所有的方法都是ctx的方法。
绘制一个矩形：
//填充矩形（x, y是横纵坐标，原点在canvas的左上角）
ctx.fillRect(x, y, width, height);
//边框矩形，默认1px 黑色。
ctx.strokeRect(x, y, width, height);
//清除指定的矩形区域，变为透明
ctx.clearRect(x, y, width, height);
//绘制动态效果时，常用来清除整个画布
//新建路径，beginPath是绘制新图形的开始
ctx.beginPath()
//路径（线）的起点，一般在上面这条命令后执行
ctx.moveTo(x, y)
//线的终点
ctx.lineTo(x, y)
//绘制圆形
ctx.arc(x, y, r, start, end, true/false)
//x, y圆心，r半径，start和end是开始和结束角度，false表示顺时针（默认），true表示逆时针。
//绘制弧线
ctx.arcTo(x1, y1, x2, y2, r);
//当前端点、(x1,y1)和(x2,y2)这三个点连成的弧线，r是半径。
//闭合路径，不是必须的，如果线的终点跟起点一样，会自动闭合。
ctx.closePath()
//通过线条绘制轮廓（边框）
ctx.stroke()
//通过路径填充区域（实心）
ctx.fill()
1.fill()和stroke()函数表示绘图结束。如果要继续绘制，需要重新新建路径（beginPath()）。
2.如果lineTo()最后的路径没有封闭，fill()函数会自动封闭路径，而stroke()函数不会。
例：绘制一个三角形
ctx.beginPath();
ctx.moveTo(75, 50);
//路径起点
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();
//自动将路径闭合，并默认填充黑色。
ctx.fillStyle = 'red'
//针对fill()有效的颜色，还可以取值：'#fff'、'rgba(0, 0, 0, 0.5)'等。
ctx.strokeStyle = 'red'
//针对stroke()有效的颜色，取值同上。
ctx.globalAlpha = 0.5;
ctx.lineWidth = 2;
//线条宽度
ctx.lineCap = 'butt(默认)'、'round(圆弧)'、'square(方形)'
//线段端点显示的样式
var ctx = document.getElementById('canvas').getContext('2d');
var lineCap = ['butt','round','square'];
ctx.strokeStyle = 'black';
for (var i=0;i&lineCap.length;i++){
ctx.lineWidth = 15;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(25+i*50,10);
ctx.lineTo(25+i*50,140);
ctx.stroke();
效果如下图：
线段连接处
ctx.lineJoin = 'miter(默认)'、round(圆角)、`bevel(横线)`
//两线段连接处所显示的样子
var ctx = document.getElementById('canvas').getContext('2d');
var lineJoin = ['round','bevel','miter'];
ctx.lineWidth = 10;
for (var i=0;i&lineJoin.length;i++){
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(10,50+i*40);
ctx.lineTo(50,10+i*40);
ctx.lineTo(90,50+i*40);
ctx.lineTo(130,10+i*40);
ctx.lineTo(170,50+i*40);
ctx.stroke();
效果如下图：
ctx.setLineDash([4, 2])
//设置虚线，参数为数组，第一个值为实现宽度，第二个值为空白的宽度
ctx.lineDashOffset = 0;
//虚线起始偏移量
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var offset = 0;
function draw() {
if (offset & 16) {
offset = 0;
ctx.clearRect(0,0, can.width, can.height);
ctx.setLineDash([6, 2]);
ctx.lineDashOffset = -offset;
ctx.strokeRect(10,10, 100, 100);
setInterval(draw, 20);
效果如下图：
var bg = ctx.createLinearGradient(x1, y1, x2, y2);
//定义线性渐变，渐变的起点 (x1,y1) 与终点 (x2,y2)。
var bg1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 100);
//定义径向渐变
bg.addColorStop(0, 'red');
//定义好，之后开始上色
bg.addColorStop(0.5, 'blue');
bg.addColorStop(1, 'rgba(0, 0, 0, 0.6)');
var bg = ctx.createLinearGradient(0, 0, 0, 200);
//线性渐变
bg.addColorStop(0, 'black');
bg.addColorStop(0.6, '#fff');
ctx.fillStyle = bg;
ctx.fillRect(10, 10, 100, 100);
效果如下图：
var bg1 = ctx.createRadialGradient(100, 100, 0, 100, 100, 50);
//径向渐变
bg1.addColorStop(0, '#FF5F98');
bg1.addColorStop(0.75, '#FF0188');
bg1.addColorStop(1, 'rgba(255,1,136,0)');
ctx.fillStyle = bg1;
ctx.fillRect(0,0,150,150);
效果如下图：
var ctx = document.getElementById('canvas').getContext('2d');
ctx.shadowOffsetX = 2;
//X轴阴影距离，负值表示往上，正值表示往下
ctx.shadowOffsetY = 2;
//Y轴阴影距离，负值表示往左，正值表示往右
ctx.shadowBlur = 2;
//阴影的模糊程度
ctx.shadowColor = &rgba(0, 0, 0, 0.5)&;
//阴影颜色
ctx.font = &30px Times New Roman&;
//设置字体和字体大小
ctx.fillStyle = &Black&;
ctx.fillText(&Sample String&, 15, 30);
//实体文字
ctx.strokeStyle = 'red';
ctx.strokeText('Hello world', 15, 100);
//边框文字
效果如下图：
文字的属性出了上面的列出的以外，还有以下一些属性：
ctx.font = '20px Times New Roman';
ctx.textAlign = 'center';
//start, end, left, right or center
ctx.textBaseline = 'middle'
//top, hanging, middle, alphabetic, ideographic, bottom
ctx.direction = 'inherit'
//ltr, rtl, inherit
var img = new Image();
img.src= './images/background.jpg';
ctx.drawImage(img, 0, 0);
//img为图像，(0, 0)为起始坐标
这里的img可以是一个img对象，也可以是一个img元素。
&img id=&img& src=&./images/background.jpg& style=&display:&&
ctx.drawImage(document.getElementById('img'), 0, 0);
另外，绘制图片的时候还可以对图片进行缩放，类似于css中的background-size：
ctx.drawImage(img, 0, 0, w, h);
//w、h指定图片的宽高，则会同比例缩放。
慢慢的从这里开始，就要开始涉及到复杂的绘制了。而开始复杂的绘制之前，我们得先了解一个概念：canvas绘图的状态。
canvas 的状态就是当前画面应用的所有样式和变形的一个快照。另外，用来操作这个状态的有两个方法：save()和restore()。save()用来保存当前状态，restore()用来恢复刚才保存的状态。他们都可以多次调用。
ctx.fillStyle = 'black';
ctx.fillRect(20, 20, 150, 150);
ctx.save();
//保存当前状态
ctx.fillStyle= '#fff';
ctx.fillRect(45, 45, 100, 100);
ctx.restore();
//恢复到刚才保存的状态
ctx.fillRect(70, 70, 50, 50);
效果如下图：
位移(translate)
ctx.translate(x, y);
//更改canvas的原点
var ctx = document.getElementById('canvas').getContext('2d');
for(var i = 1; i& 4; i++) {
ctx.save();
//使用save方法保存状态，让每次位移时都针对（0，0）移动。
ctx.translate(100*i, 0);
ctx.fillRect(0, 50, 50, 50);
ctx.restore();
效果如下图：
ctx.rotate(Math.PI * 2)
//参照原点顺时针旋转360度
ctx.translate(75,75);
//把原点移动到(75, 75);
for (var i=1; i&6; i++){
// 从里到外一共6圈
ctx.save();
ctx.fillStyle = 'rgb('+(50*i)+','+(255-50*i)+',255)';
for (var j=0; j&i*6; j++){
// 每一圈有i*6个圆点
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.fill();
ctx.restore();
效果如下图：
ctx.scale(x, y);
//基于原点缩放，x、y是两个轴的缩放倍数
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = 'red';
ctx.scale(0.8, 1.2);
ctx.beginPath();
ctx.arc(75, 75, 60, 0, Math.PI * 2);
ctx.fill();
本来绘制的是一个半径为60的圆形，但是经过缩放之后，实际效果如下：
元素的位置移动，就形成了动画。
一帧一帧的来渲染这个元素，而且这个元素每一帧的位置都不一样，我们的眼睛看到的就是动画了。实现起来也很方便，js提供了两个方法：setTimeout 和setInterval都可以实现，但是一个有逼格的程序员实现动画是不会用这两个方法的，而是用requestAnimationFrame这个方法。有什么区别呢？下面简单做个比较。
setInterval(myFun, 10); 意思是隔一毫秒执行一个myFun函数，但是这样就有一个问题了，比如我myFun函数里面绘制的东西比较耗时，而10ms之内还没有完全绘制出来，但是这段代码强制1ms之后又开始绘制下一帧了，所以就会出现丢帧的问题；反之，如果时间设置太长，就会出现画面不流畅、视觉卡顿的问题。
requestAnimationFrame(myFun); 如果我们这样写，又是什么意思呢？意思是根据一定的时间间隔，会自动执行myFun函数来进行绘制。这个”一定的时间间隔”就是根据浏览器的性能或者网速快慢来决定了，总之，它会保证你绘制完这一帧，才会绘制下一帧，保证性能的同时，也保证动画的流畅。
这些API已经包含了大部分常用的了，结合requestAnimationFrame函数已经可以绘制很多酷炫的效果了。但是光看这些API很简单，但是想要在绘制游戏或者动画中用起来得心应手还需要看大量的实例，自己实践总结的。
本文就到这里，感谢各位看官～
阅读(...) 评论()
欢迎访问我的个人博客，效果更佳哟！>>您所在位置：&>>&&>>&技术讲座
highcharts图表中级入门之offset：如何巧妙控制yAxis和xAxis坐标轴的偏移量实现象限图
作者：&|&时间： 14:06:32&|&[小&&大]&|&来源：highcharts入门课程&|&阅读：18594&|&&&：
highcharts图表组件默认情况下给我呈现的永远都是第一象限图，有些实际项目中总会碰上需要实现犹如数学课本中学到的象限图，X和Y轴在正中间相互交叉所产生的四块区域。对于这样的一个需求其实对于highcharts图表组件来说不是什么难事情，通过了解图表的相关属性，我们可以很巧妙地运用两个坐标轴的偏移量来达到这个象限图的要求。
offset：The distance in pixels from the plot area to the axis line. A positive offset moves the axis with it's line, labels and ticks away from the plot area. This is typically used when two or more axes are displayed on...
highcharts图表组件默认情况下给我呈现的永远都是第一象限图，有些实际项目中总会碰上需要实现犹如数学课本中学到的象限图，X和Y轴在正中间相互交叉所产生的四块区域。对于这样的一个需求其实对于highcharts图表组件来说不是什么难事情，通过了解图表的相关属性，我们可以很巧妙地运用两个坐标轴的偏移量来达到这个象限图的要求。
offset：The distance in pixels from the plot area to the axis line. A positive offset moves the axis with it's line, labels and ticks away from the plot area. This is typically used when two or more axes are displayed on the same side of the plot.&Defaults to&0.
中文解释为：
距离中心原点的位置值，默认为0，这也就是默认情况下为什么X和Y轴都是在原点交叉。
此值如果为负数，表示右边移动，为正数表示向左侧移动，我们知道了这一原理后我们就可以通过调节xAxis和yAxis的偏移量offset来实现象限图了的，最后我们调整为如下实例代码所示：
$(function () {
$('#container').highcharts({
marginTop: 50,//图标距离四周的距离值
marginBottom: 50,
marginLeft: 50,
marginRight: 50
gridLineWidth: 1,
tickInterval: 1,
lineColor: 'black',
offset: -150//X轴距离原点的偏移量
tickInterval: 1,
lineWidth: 1,
lineColor: 'black',
offset: -150,//Y轴距离原点的偏移量
text: null
series: [{
我们后期可以根据自己的实际需要分别调整min和max以此达到控制象限图属于几维图表。
最后的效果图如下所示：
演示地址：
&本文为原创型文章转载请尊重他人劳动成果并注明出处：/topic/?696
&可以扫描本站该博客文章的QR二维码进行访问&&
&暂无任何评论
* 以下用户言论只代表其个人观点，不代表STEP DAY网站的观点或立场
?自觉遵守：爱国、守法、自律、真实、文明的原则
?尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
?严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
?承担一切因您的行为而直接或间接导致的民事或刑事法律责任
?您在STEP DAY新闻评论发表的作品，STEP DAY有权在网站内保留、转载、引用或者删除
?参与本评论即表明您已经阅读并接受上述条款
友情链接：
这是一场关于潘肯蚋咚Ц/白富美的逆袭革命
每天进步一小步 人生进步一大步标签&canvas&&/canvas&
默认宽300，高150，不用用Css设置宽高
获取方法var ctx = cas.getcontext("2d"),该方法返回CanvasRenderingContext2D的类型对象，利用该方法绘图
基本绘图命令
设置开始绘图位置：ctx.moveTo(x,y);
设置直线到的位置：ctx.lineTo(x,y);
描边绘制：ctx.stroke();
填充绘制：ctx.fill();
自动闭合路径：ctx.closePath();
开启新的绘制：ctx.beginPath();
设置描边颜色：ctx.strokeS
设置填充颜色：ctx.fillS
保存开始设置：ctx.save();
重置到保存样式：ctx.restore();
线型相关属性
设置线宽：ctx.(数字即可)
设置线末端类型：ctx.lineC('butt' 表示两端使用方形结束,'round' 表示两端使用圆角结束,'square' 表示突出的圆角结束)
设置相交线的拐点：ctx.lineJ('round' 使用圆角连接,'bevel' 使用平切连接,'miter' 使用直角转)
获得线段样式数组：ctx.getLineDash();
设置线段样式：ctx.setLineDash();(数组形式设置)
绘制线段偏移量：ctx.lineDashO
矩形绘图命令
绘制矩形：ctx.(因为还需要fill或者stroke才可以看见效果，所以直接使用下面两种)
绘制边框矩形：ctx.strokeRect(x,y,width,height);
绘制填充矩形：ctx.fillRect(x,y,width,height);
清除矩形区域：ctx.clearRect(x,y,width,height);
圆弧绘制命令
绘制圆弧：ctx.arc(x,y,r,startAngle,endAngle,anticlockwise);参数 anticlockwise 表示是否采用默认的正向角度, 如果传入 true 表示逆指针为正. 该参数可选
绘制相切弧：非重点
绘制文本命令
绘制填充文字：ctx.fillText(text,x,y);
绘制空心文字：ctx.strokeText(text,x,y);
设置文本宽度：ctx.measureText();(非重点)
设置字体样式：ctx.
设置字体水平位置：ctx.textA(start(默认), end, left, right, center)
设置字体垂直位置：ctx.textB(top, middle, bottom, hanging, alphabetic, ideographic)
绘制图片命令
绘制图片(3参数)：ctx.drawImage(img,x,y);
绘制图片(5参数)：ctx.drawImage(img,x,y,width,height);
绘制图片(9参数)：ctx.drawImage(img,casx,casy,caswidth,casheight,x,y,width,height);
平移变换：ctx.translate(x,y);(x 表示水平移动, 正数向右, 负数向左;y 表示垂直移动, 正数向下, 负数向上)
旋转变化：ctx.ratate(radian);(参数是弧度, 表示旋转的方式. 正数表示顺时针旋转, 负数表示逆时针旋转.)
缩放变化：ctx.scale(x,y);(x控制水平缩放倍率,y控制水平缩放倍率,传1不做缩放)
阅读(...) 评论()平时工作中会遇到需要实现一些存在动画的页面。这里对动画的实现知识做一个整理。页面动画的实现可以分为两类：CSS动画、Canvas动画、JavaScript动画。JavaScript动画没啥好讲的，这里就不整理了。
CSS3中提供了一个属性
transition，用来实现CSS样式的平滑变化。举个例子:
width: 100
height: 100
background:
transition: width 1s;}.box:hover {
width: 300}
当鼠标hover到
.box元素时，元素会在1s内逐渐的将宽度变化到300px。
具体效果可以去
这里查看。
transition可以实现较为简单的动画。如果需要实现比较复杂的动画，可以使用
amination来实现。举个例子：
@keyframes cssAmination {
{background: transform: skew(0deg);}
{background: transform: skew(-20deg);}
{background: transform: skew(0deg);}
{background: transform: skew(20deg);}
100% {background: transform: skew(0deg);}}.amin {
animation: cssAmination 1}
在上的例子中，首先由
keyframes定义一个动画叫做:
cssAnimation。在
cssAnimation中定义了动画过程中关键的5帧。每一帧都设置了当前帧的样式特征。然后在
.amin节点上设置了动画属性
animation，并将其设为前面定义的动画
cssAnimation，每一次动画1秒，
infinite表示无限循环，
ease表示缓动方式，两个关键帧之间的变化是
ease方式逐步变化的。
具体效果可以到
animation的缓动函数有很多类型的值，有一个值比较特别就是
step[n[, start | end]]。
step的效果是将
keyframes中的每一个关键帧之间的切换并不是逐步变化的，而是到达某一关键帧后直接变化成新的关键帧样式，并保持不变，直到下一关键帧。所以使用
step可以实现CSS3的帧动画。写法如下：
@keyframes cssFrameAmination {
0% {background-position: 0 0;}
25% {background-position: -100px 0;}
50% {background-position: -200px 0;}
75% {background-position: -300px 0;}
100% {background-position: -400px 0;}}.amin-frame {
background: url(&./sprite.png&) 0 0 no-
animation: cssFrameAmination 1s infinite step(5, start);}
在上面的例子中，设置动画
cssFrameAmination，其中每一关键帧都是精灵动画图片的一帧图片。然后在
animation中设置
animation-timing-function为
step(5, start)表示动画分5帧。
有关CSS3动画相关的知识细节可以去
这里了解。
canvas是一个HTML标签，用于提供给脚本进行画图图形的绘制。
canvas的绘制主要由
CanvasRenderingContext2D的实例来进行绘制。
CanvasRenderingContext2D可以通过
canvasDOM对象的
getContext获得，代码如下：
const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');
getContext的参数是指在画布上绘制的类型，’2d’表示绘制二维图形。目前三维还没有实现，所以参数只支持’2d’。
canvas的上下文提供了众多的绘制方法。当你绘制一个图形时，基本思路是这样的：
save方法保存之前的样式状态
beginPath表示开始设置路径
fillStyle,
strokeStyle等对接下来的路径进行样式设置
arc等设置路径
closePath闭合路径
stroke对路径进行绘制
restore恢复之前保存的样式状态
上面过程中的
restore的作用是将已经设置的样式进行保存和恢复。当存在多个图形时，前面的样式如果不恢复为默认样式，会影响到第二个图形的样式。使用
restore可以保证每一个图形在绘制开始时，都是默认的样式。当然，你也可以不调用
restore，而是通过将前面已经设置过的所有样式进行逐个的还原。
save可以保存的样式类型有：
当前应用的变形（即移动，旋转和缩放）
strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值
当前的裁切路径（clipping path）
closePath尽量不要忘记。原因和
restore类似，如果忘记调用
closePath就会导致前后图形间多绘制一根线。
我写了一个时钟的例子：
下面对各类接口做了一个整理
图形填充颜色
strokeStyle
图形轮廓颜色
globalAlpha
图形全局透明度
shadowOffsetX, shadowOffsetY
shadowBlur
设定阴影的模糊程度
shadowColor
阴影的颜色值
线条宽度(int)
线条末端样式(butt: 平直; round: 添加半圆; square: 添加方形)
设置线条间的接合处(bevel: 斜角; round: 圆角; miter: 尖角)
miterLimit
两线相交时尖角最大长度(lineJoin:miter时生效，过长不显示)
getLineDash
返回当前虚线样式(数组)
setLineDash
设置虚线样式(数组)
lineDashOffset
设置虚线样式起始偏移量
createLinearGradient(x1, y1, x2, y2)
createRadialGradient(x1, y1, r1, x2, y2, r2)
圆渐变, 渐变反向是从圆心向外发散
gradient.addColorStop(position, color)
对生成的gradient对象添加结束颜色。position是中间过程，取值0~1
createPattern(imageOrCanvas, type)
创建图片填充对象。image必须是已加载完毕的；type: repeat, repeat-x, repeat-y, no-repeat
moveTo(x, y)
移动路径绘制的起始点
beginPath()
新建一条路径
closePath()
lineTo(x, y)
从开始位置绘制路径到目标位置
rect(x, y, width, height)
绘制矩形路径
arc(x, y, radius, startAngle, endAngle, anticlockwise)
绘制圆弧:x,y为圆心；radius为半径；startAngle,endAngle为起止位置；anticlockwise为反向（顺时针，逆时针）
arcTo(x1, y1, x2, y2, radius)
绘制圆弧，并连接控制点
quadraticCurveTo(cp1x, cp1y, x, y)
x,y为结束点; cp1x,xp1y为控制点
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
x,y为结束点；cp1x,cp1y为控制点1； cp2x,cp2y为控制点2
裁剪区域，区域外的不会发生绘制
fillRect(x, y, width, height)
绘制填充矩形，等同于rect(); fill();
strokeRect(x, y, width, height)
绘制矩形边框。等同于rect(); stroke()
填充路径的内容区域
通过路径线条绘制图形轮廓
clearRect(x, y, width, height)
清除指定矩形区域
设置文字样式,同css的font
textBaseLine
fillText(text, x, y [, maxWidth])
绘制文字填充内容
strokeText(text, x, y [, maxWidth])
绘制文字边框内容
measureText(text)
返回文本的信息
保存当前样式
恢复之前保存样式
canvas虽然可以绘制图形，但是最常用的应该是绘制图片。图片的绘制和图形的绘制类似。
canvas使用接口
drawImage()进行接口绘制，接口定义如下:
drawImage(image, x, y, width, height, dx, dy, dWidth, dHeight);
其中的参数定义如下：
image可以使HTMLImageElement, HTMLVideoElement（Video元素的某一帧）, HTMLCanvasElement, ImageBitmap。
y是目标在Canvas中的起始坐标。
height用于控制canvas绘制的图片的缩放大小。
dy是指图片截取的起始位置。
dHeight是指图片截取的宽高。
canvas还可以和CSS一样对图形进行变形转化。接口列表如下：
translate(x, y)
偏移。x,y是偏移量
rotate(angle)
旋转角度，顺时针
scale(x, y)
缩放。x, y分别是横轴，纵轴的缩放比例
transform(m11, m12, m21, m22, dx, dy)
变形矩阵转化
图形重叠处理
前面的例子中，当两个图形重叠后，都是由后面绘制的图形覆盖住前面绘制的图形。有时候需要改变这种情况。这种时候就可以使用
globalCompositeOperation来进行设置（还可以用来遮盖，清除某些区域）。具体参数可以去
globalCompositeOperation: type
使用上面的接口可以在canvas上绘制图片，但是都是固定的。当我们不断的对canvas进行重绘时，就可以达到动画的而效果。
动画的帧率达到60帧每秒时，也就是16ms没帧时，动画过程是流畅的。所以我们要对动画过程的绘制进行控制。有三个方法可以进行控制：
setInterval。设置每16ms执行一次绘制过程。但是该方法存在一个问题，开始运行绘制函数的时间点可能处于某一帧的快结束时间点。这个时候绘制过程需要小于16ms才可以达到流畅。
setTimeout。和
setInterval类似。
requestAnimationFrame。该方法会在浏览器每一次绘制结束后调用一次。使用该方法可以很好的避免
setInterval和
setTimeout出现的运行绘制函数时间不在每一帧开始的时间点。
Canvas性能
创建一个离屏canvas, 预先对复杂图形进行绘制。
避免浮点数的坐标点, 使用Math.floor()对坐标取整。
drawImage去缩放图片。
使用多canvas绘制复杂场景。
使用CSS设置大背景图。
Canvas调试
查了很多资料，发现Chrome 44版本之前是有Canvas调试功能的，但是Chrome 44之后，将Canvas调试功能去除了，并以扩展接口的方式提供功能。找了很久没有找到调试Canvas的扩展。另外，Firefox有提供专门的Canvas调试面板。试用了下，功能太少，对定位问题并没什么软用。所以，关于调试的问题，只能试用传统的设断点，并逐步运行看效果进行调试。
最新教程周点击榜
微信扫一扫