《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记

文章目录

  • 《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
    • 第1章 基础知识
    • 第2章 绘制
    • 第3章 文本
    • 第4章 图像与视频
    • 第5章 动画
    • 第6章 精灵
    • 第7章 物理效果
    • 第8章 碰撞检测

第1章 基础知识

 <style>body{background: #dddddd;}#theCanvas{margin:10px;padding:10px;background: #ffffff;border: thin inset #aaaaaa;}#theCanvas1{margin:10px;padding:10px;background: #ffffff;border: thin inset #aaaaaa;height: 300px;width: 600px;}</style></head>
<body><!-- 注意：设置canvas的宽度高度时不可使用px后缀 --><canvas id="theCanvas" height="300" width="600"></canvas><!-- 默认情况下，canvas元素大小时300*150个屏幕元素，可通过css和width，height属性改变大小 --><canvas id="theCanvas1" ></canvas><script>//获取canvas引用var canvas=document.getElementById('theCanvas');//在canvas对象上调用getContext('2d'),注意'2d'必须小写dvar context=canvas.getContext('2d');//设置绘制样式属性context.font='38pt Airal';context.fillStyle='cornflowerblue';context.strokeStyle='blue';//绘制文本内容context.fillText('Hello Canvas',canvas.width/2-150,canvas.height/2+15);context.strokeText("Hello Canvas",canvas.width/2-150,canvas.height/2+15);//获取canvas引用var canvas1=document.getElementById('theCanvas1');//在canvas对象上调用getContext('2d'),注意'2d'必须小写dvar context1=canvas1.getContext('2d');//设置绘制样式属性context1.font='38pt Airal';context1.fillStyle='cornflowerblue';context1.strokeStyle='blue';//绘制文本内容context1.fillText('Hello Canvas',canvas1.width/2-150,canvas1.height/2+15);context1.strokeText("Hello Canvas",canvas1.width/2-150,canvas1.height/2+15);</script></body>

对比theCanvas和theCanvas1可知

  • canvas元素实际上由两套尺寸，一个时元素本身的大小，还有一个时元素绘制表面的大小
  • 属性width和height设置的时元素本身大小和元素绘制表面的大小
  • css设置canvas大小，只修改元素本身大小，不影响绘制表面，容易出现像素伸缩的情况
  • 浏览器可能会自动缩放canvas,当元素大小域canvas绘图表面不相符，浏览器会缩放后者，使之复合前者大小，可能会导致奇怪、无用的效果

canvas元素的属性

属性 描述 类型 取值范围 默认值
width canvas元素绘图表面的宽度，在默认情况下，浏览器会将canvas元素的大小设定与绘图表面大小一致，然而，如果在CSS中覆写了元素的大小，那么浏览器会将绘图表面进行缩放，使之复合元素尺寸 非负整数 在有效范围内的任意非负整数，可添加+与空格，不能给数值添加px 300
height canvas元素绘图表面的高度。浏览器可能将绘图表面缩放至与元素相同的尺寸。 非负整数 在有效范围内的任意非负整数，可添加+与空格，不能给数值添加px 300

canvas元素的方法

属性 描述
getContext() 返回与该canvas元素相关的绘图环境对象。每个canvas元素均有一个这样的环境对象，而且每个环境对象均与一个canvas元素相关联
toDataURL(type,quality) 返回一个数据地址（data URL),你可以将它设定为img元素的src属性值。第一个参数指定了图形的类型，例如image/jpeg或image/png，如果不指定第一个参数，则默认使用image/png。第二个参数必须是0~1.0之间的double值，表示JPEG图像显示的质量
toBlob(callback,type,args…) 创建一个用于表示canvas元素图像文件的Blob，第一个参数是回调函数，浏览器会以一个指向blob的引用为参数，去调用该回调函数。第二个参数以“image/png"这样的象时来指定图像类型。如果不指定，则默认使用”image/png“，最后一个参数是介于0~1.0之间的值，表示JPEG图像的质量。将来很可能会加入其他一些用于精确调控图像属性的参数。

CanvasRenderingContext2D对象所含的属性

属性 简介
canvas 指向该绘图环境所属的canvas对象，该属性最常见的用途就是通过它来获取canvas的宽度和高度，分别调用context.canvas.width与context.canvas.height即可
fillstyle 指定该绘图环境在后续的图形填充操作中所使用的颜色、渐变色或图案
font 设定在调用绘图环境对象的fillText()或strokeText()方法所使用的字形
globalAlpha 全局透明度设定，它可以取0（完全透明）~1.0（完全不透明）之间的值，浏览器会将每个像素的alpha值与该值相乘，在绘制图像时也是如此
globalCompositeOperation 该值决定了浏览器将某个物体绘制在其他物体之上时，所采用的绘制方式。
lineCap 该值告诉浏览器如何绘制线段的端点，可用值：butt、round及square，默认butt
lineWidth 该值决定了在canvas之中绘制线段的屏幕像素宽度，它必须时非负、非无穷的double值，默认1.0
lineJoin 该值告诉浏览器两条线段相交时如何绘制焦点，可取值：bevel，round，miter，默认值miter
miterLimit 告诉浏览器如何绘制miter形式的线段焦点
shadowBlur 该值决定了路篮球如何延伸阴影效果。值越高，阴影效果延伸越远。该值不是指阴影的像素长度，而是代表高斯模糊方程式中的参数值，它必须时一个非负非无穷的double值，默认0
shadowColor 该值告诉浏览器使用何种颜色绘制阴影。通常采用半透明色作为该属性的值，以便让后面的背景能显示
shadowOffsetX 以像素为单位，指定阴影效果的水平方向偏移量
shadowOffsetY 以像素为单位，指定阴影效果的垂直方向偏移量
strokeStyle 指定了对路径进行描边时索用的绘制风格，该值可被设定为某颜色、渐变色或图案
textAlign 决定了以fillText()或strokeText()进行描绘时，所画文本的水平对齐方式
textBaseline 决定了以fillText()或strokeText()进行绘制时，所画文本垂直对齐方式

canvas提供save()和restore()用于保存以及回复当前canvas绘图环境属性

function drawGrid(strokeStyle,fillStyle){controlContext.save();//保存context到栈controlContext.fillStyle=fillStyle;controlContext.strokeStyle=strokeStyle;/**draw grid*/controlContext.restore();//从栈中恢复context//save()和restore()方法可以嵌套式调用
}

CanvasRenderingContext2D之中与状态操作有关的方法

方法 描述
save() 将当前canvas的状态推送到一个保存canvas状态的堆栈顶部。canvas状态包括了当前的坐标变换（transformation)信息、剪辑区域（clipping region）以及所有canvas绘图环境对象的属性，包括strokeStyle，fillStyle与globalCompositeOperation等。canvas状态并不保存当前的路径或位图，只能通过调用beginPath()来充值路径，至于位图，他是canvas本身的一个属性，并不属于绘图环境对象。注意：尽管位图是canvas对象本身的属性，而可以通过绘图环境对象来访问它（在环境对象上调用getImageData()方法）
restore() 将canvas状态堆栈顶部的条目弹出，原来保存于栈顶的那组状态，在弹出之后，被设置成canvas当前状态，浏览器必须根据该值来设定canvas对应的属性，因此在调用save()与restore()之前，对canvas状态所进行的修改，其效果指挥持续至restore()方法调用之前。

基本的绘制操作

.arc()
.beginPath()
.clearRect()
.fill()
.fillText()
.lineTo()
.moveTo()
.stroke()

一个基本的时钟程序

var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
var FONT_HEIFHT=15,MARGIN=35,HAND_TRUNCATION=canvas.width/25,
HOUR_HAND_TRUNCATION=canvas.width/10,
NUMBER_SPACING=20,
RADIUS=canvas.width/2-MARGIN,
HAND_RADIUS=RADIUS+NUMBER_SPACING;function drawCircle(){context.beginPath();context.arc(canvas.width/2,canvas.height/2,RADIUS,0,Math.PI*2,true);context.stroke();
}function drawNumerals() {var numerals=[1,2,3,4,5,6,7,8,9,10,11,12],angle=0,numeralWidth=0;numerals.forEach(function (numeral) {angle=Math.PI/6*(numeral-3);numeralWidth=context.measureText(numeral).width;context.fillText(numeral,canvas.width/2+Math.cos(angle)*(HAND_RADIUS)-numeralWidth/2,canvas.height/2+Math.sin(angle)*(HAND_RADIUS)+FONT_HEIFHT/3);});}function drawCenter(){context.beginPath();context.arc(canvas.width/2,canvas.height/2,5,0,Math.PI*2,true);context.stroke();}function drawHand(loc,isHour){var angle=(Math.PI*2)*(loc/60)-Math.PI/2,handRadius=isHour?RADIUS-HAND_TRUNCATION-HOUR_HAND_TRUNCATION:RADIUS-HAND_TRUNCATION;context.moveTo(canvas.width/2,canvas.height/2);context.lineTo(canvas.width/2+Math.cos(angle)*handRadius,canvas.height/2+Math.sin(angle)*handRadius);context.stroke();}function drawHands(){var date=new Date(),hour=date.getHours();hour=hour>12?hour-12:hour;drawHand(hour*5+(date.getMinutes()/60)*5,true,0.5);drawHand(date.getMinutes(),false,0.5);drawHand(date.getSeconds(),false,0.2);}function drawClock(){context.clearRect(0,0,canvas.width,canvas.height);drawCircle();drawCenter();drawHands();drawNumerals();}context.font=FONT_HEIFHT+'px Arial';loop=setInterval(drawClock,1000);

事件处理

//浏览器监听
canvas.onmousedown=function(e){/**code*/
}
canvas.addEventListener('mousedown',function(e){/**code*/
})//将鼠标坐标转换为canvas坐标
function windowToCanvas(canvas,x,y){var bbox=canvas.getBoundingClientRect();return {x:x-bbox.left*(canvas.width/bbox.width),y:y-bbox.top*(canvas.height/bbox.height)};
}
canvas.onmousemove=function(e){var loc=windowToCanvas(canvas,e.clientX,e.clientY);drawBackground();drawSpritesheet();drawGuidelines(loc.x,loc.y);updateReadout(loc.x,loc.y);
}

精灵表坐标查看器

 <div id="readout"></div><canvas height="500" width="500" id="theCanvas"></canvas><script>
var canvas=document.getElementById('theCanvas'),
readout=document.getElementById('readout'),
context=canvas.getContext('2d'),
spritesheet=new Image();function windowToCanvas(canvas,x,y){var bbox=canvas.getBoundingClientRect();return {x:x-bbox.left*(canvas.width/bbox.width),y:y-bbox.top*(canvas.height/bbox.height)};
}
function drawBackground(){var VERTICAL_LINE_SPACING=12,i=context.canvas.height;context.clearRect(0,0,canvas.width,canvas.height);context.strokeStyle='lightgray';context.lineWidth=0.5;while(i>VERTICAL_LINE_SPACING*4){context.beginPath();context.moveTo(0,i);context.lineTo(context.canvas.width,i);context.stroke();i-=VERTICAL_LINE_SPACING;}
}
function drawSpritesheet(){context.drawImage(spritesheet,0,0);
}
function drawGuidelines(x,y){context.strokeStyle='rgba(0,0,230,0.8)';context.lineWidth=0.5;drawVerticalLine(x);drawHorizontalLine(y);
}function updateReadout(x,y){readout.innerText='('+x.toFixed(0)+','+y.toFixed(0)+')';
}function drawHorizontalLine(y) {context.beginPath();context.moveTo(0,y+0.5);context.lineTo(context.canvas.width,y+0.5);context.stroke();}
function drawVerticalLine(x){context.beginPath();context.moveTo(x+0.5,0);context.lineTo(x+0.5,context.canvas.height);context.stroke();
}
canvas.onmousemove=function(e){var loc=windowToCanvas(canvas,e.clientX,e.clientY);drawBackground();drawSpritesheet();drawGuidelines(loc.x,loc.y);updateReadout(loc.x,loc.y);
}
spritesheet.src="close.svg";
spritesheet.onload=function(e){drawSpritesheet();
}
drawBackground();</script>

通过保存与恢复绘图表面来绘制辅助线

var canvas=document.getElementById('theCanvas'),
context=canvas.getContext('2d');
function saveDrawingSurface(){drawingSurfaceImageData=context.getImageData(0,0,canvas.width,canvas.height);
}
function restoreDrawingSurface(){context.putImageData(drawingSurfaceImageData,0,0);
}
canvas.onmousedown=function(e){saveDrawingSurface();
}
canvas.onmousemove=function(e){var loc=windowToCanvas(e);if(dragging){restoreDrawingSurface();if(guidewires){drawGuidewires(mousedown.x,mousedown.y);}}
};
canvas.onmouseup=function(e){restoreDrawingSurface();
};

使用DIV元素来实现橡皮筋式选取框

 <style type="text/css">#rubberbandDiv{position: absolute;cursor: crosshair;display: none;height: 100px;width: 100px;border: solid 3px dodgerblue;}</style>
</head><body><div id="controls"><button id="resetButton">reset</button></div><div id="rubberbandDiv"></div><canvas height="800" width="1000" id="theCanvas"></canvas><script>
var canvas=document.getElementById('theCanvas'),
context=canvas.getContext('2d');
rubberbandDiv=document.getElementById('rubberbandDiv'),
resetButton=document.getElementById('resetButton'),
image=new Image(),
mousedown={},
rubberbandRectangle={},
dragging=false;function rubberbandStart(x,y){mousedown.x=x;mousedown.y=y;rubberbandRectangle.left=mousedown.x;rubberbandRectangle.top=mousedown.y;moveRubberbandDiv();showRubberbandDiv();dragging=true;
}function rubberbandStretch(x,y){rubberbandRectangle.left=x<mousedown.x?x:mousedown.x;
rubberbandRectangle.top=y<mousedown.y?y:mousedown.y;rubberbandRectangle.width=Math.abs(x-mousedown.x);
rubberbandRectangle.height=Math.abs(y-mousedown.y);moveRubberbandDiv();
resizeRubberbandDiv();
}function rubberbandEnd(){var bbox=canvas.getBoundingClientRect();try{context.drawImage(canvas,rubberbandRectangle.left-bbox.left,rubberbandRectangle.top-bbox.top,rubberbandRectangle.width,rubberbandRectangle.height,0,0,canvas.width,canvas.height);}catch(e){}resetRubberbandRectangle();rubberbandDiv.style.width=0;rubberbandDiv.style.height=0;hideRubberbandDiv();dragging=false;
}
function moveRubberbandDiv(){rubberbandDiv.style.top=rubberbandRectangle.top+'px';rubberbandDiv.style.left=rubberbandRectangle.left+'px';
}function resizeRubberbandDiv(){rubberbandDiv.style.width=rubberbandRectangle.width+'px';rubberbandDiv.style.height=rubberbandRectangle.height+'px';
}
function showRubberbandDiv(){rubberbandDiv.style.display='inline';
}
function hideRubberbandDiv(){rubberbandDiv.style.display='none';
}
function resetRubberbandRectangle(){rubberbandRectangle={top:0,left:0,width:0,height:0};
}
canvas.onmousedown=function(e){var x=e.clientX,y=e.clientY;e.preventDefault();rubberbandStart(x,y);
}
window.onmousemove=function(e){var x=e.clientX,y=e.clientY;e.preventDefault();if(dragging){rubberbandStretch(x,y);}
}
window.onmouseup=function(e){e.preventDefault();rubberbandEnd();
}
image.onload=function(){context.drawImage(image,0,0,canvas.width,canvas.height);
}
resetButton.onclick=function(e){context.clearRect(0,0,context.canvas.width,context.canvas.height);context.drawImage(image,0,0,canvas.width,canvas.height);
}
image.src='dlam1.jpg';
</script>

使用toDataURL()方法将canvas的内容打印出来

    <div id="controls"><input id="snapshotButton" type="button" value="Take snapshot" ></div><img id="snapshotImageElement"><canvas height="500" width="500" id="theCanvas"></canvas><script>
var canvas=document.getElementById('theCanvas'),
context=canvas.getContext('2d');
var snapshotButton=document.getElementById('snapshotButton'),
snapshotImageElement=document.getElementById('snapshotImageElement'),
loop;
snapshotButton.onclick=function(e){var dataUrl;if(snapshotButton.value==='Take snapshot'){dataUrl=canvas.toDataURL();clearInterval(loop);snapshotImageElement.src=dataUrl;snapshotImageElement.style.display='inline';canvas.style.display='none';snapshotButton.value='Return to Canvas';}else{canvas.style.display='inline';snapshotImageElement.style.display='none';loop=setInterval(drawClock,1000);snapshotButton.value='Take snapshot';}
};//画时钟代码</script>

以图像方式实现的时钟程序

<style type="text/css">#snapshotImageElement{position: absolute;left: 10px;border: thin solid #aaaaaa;}</style>
<img id="snapshotImageElement"><canvas height="500" width="500" id="theCanvas"></canvas><script>
var canvas=document.getElementById('theCanvas'),
context=canvas.getContext('2d');
var snapshotImageElement=document.getElementById('snapshotImageElement');
//离屏canvas
//var offscreen=document.createElement('theCanvas');
//.....
function updateClockImage(){snapshotImageElement.src=canvas.toDataURL();
}
function drawClock(){context.clearRect(0,0,canvas.width,canvas.height);context.save();context.fillStyle='rgba(255,255,255,0.8)';context.fillRect(0,0,canvas.width,canvas.height);drawCircle();drawCenter();drawHands();context.restore();drawNumerals();updateClockImage();
}
//.....
</script>

第2章 绘制

Canvas的绘制模型

在向canvas之上绘制图像或图形时，浏览器按照以下步骤操作：

1.将图形或图像绘制到一个无限大的透明位图中，在绘制时遵从当前的填充模式、描边模式以及线条样式。

2.将图像或图形的阴影绘制到另外一幅位图中，在绘制时使用当前绘图环境的阴影设定。

3.将阴影中每一个像素的alpha分量诚意绘图环境对象的globalAlpha属性值。

4.将绘有阴影的位图与经过剪辑区域剪切过的canvas进行图像合成，在操作时使用当前的合成模式参数。

5.将图形或图像的每一个像素颜色分量，乘以绘图环境对象的globalAlpha属性值。

6.将绘有图形或图像的位图，合成到当前经过剪辑区域剪切过的canvas位图之上，在操作时使用当前的合成操作符。

只有在启用阴影效果时才会执行第2~4步。

矩形的绘制

//将整个canvas的内容清除context.clearRect(double x,double y,double w,double h)//绘制矩形边框context.strokeRect(double x,double y,double w,double h)//绘制矩形填充context.fillRect(double x,double y,double w,double h)

绘制简单的矩形

  <canvas height="500" width="500" id="theCanvas"></canvas><script>
var canvas=document.getElementById('theCanvas'),
context=canvas.getContext('2d');
context.lineJoin='round';
context.lineWidth=30;
context.font='24px Helvetica';
context.fillText('Click anywhere to erase',175,40);
context.strokeRect(75,100,200,200);
context.fillRect(325,100,200,200);
context.canvas.onmousedown=function(e){context.clearRect(0,0,canvas.width,canvas.height);
}
</script>

矩形的清除、描边与填充

方法 描述
clearRect(double x,double y,double w,double h) 将指定矩形与当前剪辑区域相交范围内的所有像素清除。在默认情况下，剪辑区域的大小就是整个canvas。所以，吐过你没有改动剪辑区域的话，那么在参数所指范围内的所有像素都会被清除。所谓“清除像素”指的是将其颜色设置位全透明黑色，在实际效果上就等同于“擦除"或者“清除"了某个像素，从而使得canvas的背景可以透过该像素显示出来。
strokeRect(double x,double y,double w,double h) 使用如下属性，指定矩形的描边：strokeStyle,lineWidth,lineJoin,miterLimit如果宽度w，高度h有一个为0的话，那么该方法将会分别绘制一条竖线或横线，如果两者都是0则不绘制任何东西。
fillRect(double x,double y,double w,double h) 使用fillStyle属性填充指定的矩形，如果宽度或高度是0的话，则不绘制任何东西。

颜色与透明度

 <canvas height="500" width="500" id="theCanvas"></canvas><script>
var canvas=document.getElementById('theCanvas'),
context=canvas.getContext('2d');
context.lineJoin='round';
context.lineWidth=30;
context.font='24px Helvetica';
context.fillText('Click anywhere to erase',175,200);
context.strokeStyle='goldenrod';
context.fillStyle='rgba(0,0,255,0.5)';
context.strokeRect(75,100,200,200);
context.fillRect(325,100,200,200);
context.canvas.onmousedown=function(e){context.clearRect(0,0,canvas.width,canvas.height);
}
</script>

渐变

var canvas=document.getElementById('theCanvas'),
context=canvas.getContext('2d');
//线性渐变
var gradient=context.createLinearGradient(0,0,canvas.width,0);
//放射渐变
//var gradient=context.createRadialGradient(canvas.width/2,canvas.width/2,0,100);
gradient.addColorStop(0,'blue');
gradient.addColorStop(0.25,'red');
gradient.addColorStop(0.5,'purple');
gradient.addColorStop(0.75,'red');
gradient.addColorStop(1,'yellow');
context.fillStyle=gradient;
context.rect(0,0,canvas.width,canvas.height);
context.fill();

渐变色

方法 描述
createLinearGradient(double x0,double y0,double x1,double y1) 创建线性渐变，传入该方法的参数表示渐变线的两个端点，该方法返回一个CanvasGradient实例，可以通过addColorStop()方法来向该渐变色增加颜色停止点
createRadialGradient(double x0,double y0,double x1,double y1) 创建放射渐变，该方法的参数代表位于圆锥形渐变区域两端的圆形，与createLinearGradient方法一样。

图案

<div><input type="radio" id="repeatRadio" name="patternRadio" checked>repeat<input type="radio" id="repeatXRadio" name="patternRadio" >repeat-x<input type="radio" id="repeatYRadio" name="patternRadio" >repeat-y<input type="radio" id="noRepeatRadio" name="patternRadio" >no repeat</div><canvas height="500" width="500" id="theCanvas"></canvas><script>
var canvas=document.getElementById('theCanvas'),
context=canvas.getContext('2d');
var repeatRadio=document.getElementById('repeatRadio'),
repeatXRadio=document.getElementById('repeatXRadio'),
repeatYRadio=document.getElementById('repeatYRadio'),
noRepeatRadio=document.getElementById('noRepeatRadio'),
image=new Image();function fillCnavasWidthPattern(repeatString){var pattern=context.createPattern(image,repeatString);context.clearRect(0,0,canvas.width,canvas.height);context.fillStyle=pattern;context.fillRect(0,0,canvas.width,canvas.height);context.fill();
}
repeatRadio.onclick=function(e){fillCnavasWidthPattern('repeat');
}
repeatXRadio.onclick=function(e){fillCnavasWidthPattern('repeat-x');
}
repeatYRadio.onclick=function(e){fillCnavasWidthPattern('repeat-y');
}
noRepeatRadio.onclick=function(e){fillCnavasWidthPattern('no-repeat');
}
image.src="bell.png";
image.onload=function(e){fillCnavasWidthPattern('repeat');
}
</script>

createPattern()方法

方法 描述
createPattern(HTMLImageElement|HTMLCanvasElement|HTMLVideoElement image,DOMString repetition) 创建一个可以用来在canvas之中对图形和文本进行描边与填充图案，该方法第一个参数指定了图案所用的图像，它可以是image元素，canvas元素或者video元素，第2个参数告诉浏览器，在对图形进行描边或填充时，应该如何重复该图案。有效值：repeat,repeat-x,repeat-y,no-repeat

阴影

  • shadowColor:CSS3格式的颜色
  • shadowOffsetX:从图形或文本到阴影的水平像素偏移
  • shadowOffsetY:从图形或文本到阴影的垂直像素偏移
  • shadowBlur:一个与像素无关的值，高斯模糊方程。以便对阴影进行模糊化处理

如果满足以下条件，那么使用canvas的绘图环境对象就可以绘制阴影效果：

1.指定的shadowColor值不是全透明的。

2.在其余的阴影属性之中，存在一个非0的值

var SHADOW_COLOR='rgba(0,0,0,0.7)';//.....
function setIconShadow(){iconContext.shadowColor=SHADOW_COLOR;//负偏移 内嵌阴影 正偏移 外阴影iconContext.shadowOffsetX=4;iconContext.shadowOffsetY=4;iconContext.shadowBlur=5;
}

绘制内嵌阴影

var drawingContext=document.getElementById('drawingCanvas').getContext('2d'),ERASER_LINE_WIDTH=1,ERASER_SHADOW_STYLE='blue',ERASER_STROKE_STYLE='rgba(0,0,255,0.6)',ERASER_SHADOW_OFFSET= -5,ERASER_SHADOW_BLUR=20,ERASER_RADIUS=60;
function setEraserAttributes(){drawingContext.lineWidth=ERASER_LINE_WIDTH;drawingContext.shadowColor=ERASER_SHADOW_STYLE;drawingContext.shadowOffsetX=ERASER_SHADOW_OFFSET;drawingContext.shadowOffsetY=ERASER_SHADOW_OFFSET;drawingContext.shadowBlur=ERASER_SHADOW_BLUR;drawingContext.strokeStyle=ERASER_STROKE_STYLE;
}
function drawEraser(loc){drawingContext.save();setEraserAttributes();drawingContext.beginPath();drawingContext.arc(loc.x,loc.y,ERASER_RADIUS,0,Math.PI*0.2,false);drawingContext.clip();drawingContext.stroke();drawingContext.restore();
}

CanvasRenderingContext2D之中与阴影效果有关的属性

属性 描述
shadowBlur 表示阴影效果如何延伸的double值，浏览器在阴影之上运用高斯模糊时，将会用到该值，它与像素无关，只会被用在高斯模糊方程之中，默认值0
shadowColor CSS格式的颜色字串，默认值rgba(0,0,0,0)
shadowOffsetX 阴影在X轴上偏移量，以像素为单位，默认0
shadowOffsetY 阴影在Y轴上偏移量，以像素为单位，默认0

文本、矩形与圆弧的描边及填充

var context=document.getElementById('drawingCanvas').getContext('2d');
function drawGrid(context,color,stepx,stepy){}
drawGrid(context,'lightgray',10,10);
context.font='48pt Helvetica';
context.fillStyle='red';
context.lineWidth='2';
context.strokeText('Stroke',60,110);
context.fillText('Fill',440,110);
context.strokeText('Stroke & Fill',650,110);
context.fillText('Stroke & Fill',650,110);
context.lineWidth='5';
context.beginPath();
context.rect(80,150,150,100);
context.stroke();context.beginPath();
context.rect(400,150,150,100);
context.arc(475,370,60,0,Math.PI*3/2);
context.closePath();
context.fill();

CanvasRenderingContext2D之中与路径有关

方法 描述
arc() 在当前路径中增加一段表示圆弧或圆形的子路径，与rect方法不同，可以通过一个boolean参数来控制该段子路径的方向。参数为true，那么arc()所创建的子路径就是顺时针的，否在逆时针。如果在调用该方法时以及由其他的子路径存在，那么arc()方法则会用一条线段把已有路径的终点与这段圆弧路径的起点连接起来。
beginPath() 将当前路径之中的所有子路径都清除掉，以此来重置当前路径。
closePath() 显式地封闭某段开放路径，该方法用于封闭圆弧路径以及由曲线或线段所创建的开放路径。
fill() 使用fillStyle对当前路径的内部进行填充
rect(double x,double y,double w, double h) 在坐标(x,y)外建立一个宽度为w，高度为h的矩形子路径，该子路径一定时封闭的，而且总是按逆时针方向来创建
stroke() 使用strokeStyle来描绘当前路径的轮廓线

运用非零环绕规则来实现剪纸效果

var context=document.getElementById('drawingCanvas').getContext('2d');
function drawGrid(context,color,stepx,stepy){}
function drawTwoArcs(){context.beginPath();context.arc(300,190,150,0,Math.PI*2,false);context.arc(300,190,100,0,Math.PI*2,true);context.fill();context.shadowColor=undefined;context.shadowOffsetX=0,context.shadowOffsetY=0;context.stroke();
}function draw(){context.clearRect(0,0,context.canvas.width,context.canvas.height);drawGrid('lightgray',10,10);context.save();context.shadowColor='rgba(0,0,0,0.8)';context.shadowOffsetX=12;context.shadowOffsetY=12;context.shadowBlur=15;drawTwoArcs();context.restore();
}
context.fillStyle='rgba(100,140,230,0.5)';
context.strokeStyle=context.fillStyle;
draw();function drawCutouts(){context.beginPath();addOutRectanglePath();addCirclePath();addRectanglePath();addTrianglePath();context.fill();
}function rect(x,y,w,h,direction){if(direction){context.moveTo(x,y);context.lineTo(x,y+h);context.lineTo(x+w,y+h);context.lineTo(x+w,y);}else{context.moveTo(x,y);context.lineTo(x+w,y);context.lineTo(x+w,y+h);context.lineTo(x,y+h);}context.closePath();
}
function addOuterRectanglePath(){context.rect(110,25,370,335);
}
function addRectanglePath(){rect(310,55,70,35,true);
}

绘制剪纸图形

var canvas=document.getElementById('theCanvas').getContext('2d');
function drawGrid(color,stepx,stepy){}
function draw(){context.clearRect(0,0,context.canvas.width,context.canvas.height);drawGrid('lightgray',10,10);context.save();context.shadowColor='rgba(200,200,0,0,0.5)';context.shadowOffsetX=12;context.shadowOffsetY=12;context.shadowBlur=15;drawCutouts();strokeCutoutShapes();context.restore();
}
function drawCutouts(){context.beginPath();addOuterRectanglePath();addCirclePath();addRectanglePath();addTrianglePath();context.fill();
}
function strokeCutoutShapes(){context.save();context.strokeStyle='rgba(0,0,0,0.7)';context.beginPath();addOuterRectanglePath();context.stroke();context.beginPath();addCirclePath();addRectanglePath();addTrianglePath();context.stroke();context.restore();
}
function rect(x,y,w,h,direction){if(direction){context.moveTo(x,y);context.lineTo(x,y+h);context.lineTo(x+w,y+h);context.lineTo(x+w,y);}else{context.moveTo(x,y);context.lineTo(x+w,y);context.lineTo(x+w,y+h);context.lineTo(x,y+h);}context.closePath();
}
function addOuterRectanglePath(){context.rect(110,25,370,335);
}
function addRectanglePath(){rect(310,55,70,35,true);
}
function addCirclePath(){context.arc(300,300,40,0,Math.PI*2,true);
}
function addTrianglePath(){context.moveTo(400,200);context.lineTo(250,115);context.lineTo(200,200);context.closePath();
}
context.fillStyle='goldenrod';
draw();

绘制线段

var canvas=document.getElementById('theCanvas').getContext('2d');
context.lineWidth=1;
context.beginPath();
context.moveTo(50,10);
context.lineTo(450,10);
context.stroke();

moveTo()和lineTo()

方法 描述
moveTo(x,y) 向当前路径中增加一条子路径，该子路径只包含一个点，就是由参数传入的那个点，该方法并不会从当前路径中清除任何子路径
lineTo(x,y) 如果当前路径中没有子路径，那么这个方法的行为与moveTo()方法，他会创建一条新的子路径，其中包含了经由参数所传入的那个点。如果当前路径中存在子路径，那该方法将你所指定的那个点加入子路径中。

绘制网格

var canvas=document.getElementById('theCanvas').getContext('2d');
function drawGrid(context,color,stepx,stepy){context.strokeStyle=color;context.lineWidth=0.5;for(var i=stepx+0.5;i<context.canvas.width;i+=stepx){context.beginPath();context.moveTo(i,0);context.lineTo(i,context.canvas.height);context.stroke();}for(var i=stepy+0.5;i<context.canvas.height;i+=stepy){context.beginPath();context.moveTo(0,i);context.lineTo(context.canvas.width,i);context.stroke();}
}
drawGrid(context,'lightgray',10,10);

绘制坐标轴

var canvas=document.getElementById('canvas'),
context=canvas.getContext('2d'),
AXIS_MARGIN=40,
AXIS_ORIGIN={x:AXIS_MARGIN,y:canvas.height-AXIS_MARGIN},
AXIS_TOP=AXIS_MARGIN,
AXIS_RIGHT=canvas.width-AXIS_MARGIN,
HORIZONTAL_TICK_SPACING=10,
VERTICAL_THICK_SPACING=10,
AXIS_WIDTH=AXIS_RIGHT-AXIS_ORIGIN.x,
AXIS_HEIGHT=AXIS_ORIGIN.y-AXIS_TOP,
NUM_VERTICAL_TICKS=AXIS_HEIGHT/VERTICAL_THICK_SPACING,
NUM_HORIZONTAL_TICKS=AXIS_WIDTH/HORIZONTAL_TICK_SPACING,
TICK_WIDTH=10,
TICK_LINEWIDTH=0.5,
TICK_COLOR='navy',
AXIS_LINEWIDTH=1.0,
AXIS_COLOR='blue';function drawGrid(color,stepx,stepy){}
function drawAxes(){context.save();context.strokeStyle=AXIS_COLOR;context.lineWidth=AXIS_LINEWIDTH;drawHorizontalAxis();drawVerticalAxis();context.lineWidth=0.5;context.lineWidth=TICK_LINEWIDTH;context.strokeStyle=TICK_COLOR;drawVerticalAxisTicks();drawHorizontalAxisTicks();context.restore();
}
function drawHorizontalAxis(){context.beginPath();context.moveTo(AXIS_ORIGIN.x,AXIS_ORIGIN.y);context.lineTo(AXIS_RIGHT,AXIS_ORIGIN.y);context.stroke();
}
function drawVerticalAxis(){context.beginPath();context.moveTo(AXIS_ORIGIN.x,AXIS_ORIGIN.y);context.lineTo(AXIS_ORIGIN.x,AXIS_TOP);context.stroke();
}
function drawVerticalAxisTicks(){var deltaX;
for(var i=1;i<NUM_VERTICAL_TICKS;++i){context.beginPath();if(i%5===0)deltaX=TICK_WIDTH;else deltaX=TICK_WIDTH/2;context.moveTo(AXIS_ORIGIN.x-deltaX,AXIS_ORIGIN.y-i*VERTICAL_THICK_SPACING);context.lineTo(AXIS_ORIGIN.x+deltaX,AXIS_ORIGIN.y-i*VERTICAL_THICK_SPACING);context.stroke();
}
}function drawHorizontalAxisTicks(){var deltaY;for(var i=1;i<NUM_VERTICAL_TICKS;++i){context.beginPath();if(i%5===0)deltaY=TICK_WIDTH;else deltaY=TICK_WIDTH/2;context.moveTo(AXIS_ORIGIN.x-deltaY,AXIS_ORIGIN.y-i*HORIZONTAL_TICK_SPACING);context.lineTo(AXIS_ORIGIN.x+deltaY,AXIS_ORIGIN.y-i*HORIZONTAL_TICK_SPACING);context.stroke();}
}
drawGrid('lightgray',10,10);
drawAxes();

橡皮筋式的线条绘制

 <div id="controls">Stroke color:<select id="strokeStyleSelect"><option value="red">red</option><option value="green">green</option><option value="blue">blue</option><option value="orange">orange</option><option value="cornflowerblue">cornflowerblue</option><option value="goldenrod">goldenrod</option><option value="navy">navy</option><option value="purple">purple</option></select>Guidewires:<input type="checkbox" checked id="guidewireCheckbox"><input type="button"  id="eraseAllButton" value="Erase all" ></div><canvas height="500" width="500" id="theCanvas"></canvas><script>
var canvas=document.getElementById('theCanvas'),
context=canvas.getContext('2d'),
eraseAllButton=document.getElementById('eraseAllButton'),
strokeStyleSelect=document.getElementById('strokeStyleSelect'),
guidewireCheckbox=document.getElementById('guidewireCheckbox'),
drawingSurfaceImageData,
mousedown={},
rubberbandRect={},
dragging=false,
guidewires=guidewireCheckbox.checked;function drawGird(color,stepx,stepy){}function windowToCanvas(x,y){var bbox=canvas.getBoundingClientRect();return {x:x-bbox.left*(canvas.width/bbox.width),y:y-bbox.top*(canvas.height/bbox.height)};
}
function saveDrawingSurface(){drawingSurfaceImageData=context.getImageData(0,0,canvas.width,canvas.height);
}
function restoreDrawingSurface(){putImageData(drawingSurfaceImageData,0,0);
}
function updateRubberbandRectangle(loc){rubberbandRect.width=Math.abs(loc.x-mousedown.x);rubberbandRect.height=Math.abs(loc.y-mousedown.y);if(loc.x>mousedown.x)rubberbandRect.left=mousedown.x;else rubberbandRect.left=loc.x;if(loc.y>mousedown.y)rubberbandRect.top=mousedown.y;else rubberbandRect.top=loc.y;
}
function drawRubberbandShape(loc){context.beginPath();context.moveTo(mousedown.x,mousedown.y);context.lineTo(loc.x,loc.y);context.stroke();
}
function updateRubberband(loc){updateRubberbandRectangle(loc);drawRubberbandShape(loc);
}
function drawHorizontalLine(y){context.beginPath();context.moveTo(0,y+0.5);context.lineTo(context.canvas.width,y+0.5);context.stroke();
}
function drawVerticalLine(x){context.beginPath();context.moveTo(x+0.5,0);context.lineTo(x+0.5,context.canvas.height);context.stroke();
}
function drawGuidewires(x,y){context.save();context.strokeStyle='rgba(0,0,230,0.4)';context.lineWidth=0.5;drawVerticalLine(x);drawHorizontalLine(y);context.restore();
}
canvas.onmousedown=function(e){var loc=windowToCanvas(e.clientX,e.clientY);e.preventDefault();saveDrawingSurface();mousedown.x=loc.x;mousedown.y=loc.y;dragging=true;
}
canvas.onmousemove=function(e){var loc;if(dragging){e.preventDefault();loc=windowToCanvas(e.clientX,e.clientY);restoreDrawingSurface();updateRubberband(loc);if(guidewires){drawGuidewires(loc.x,loc.y);}}
}
canvas.onmousedown=function(e){loc=windowToCanvas(e.clientX,e.clientY);restoreDrawingSurface();updateRubberband(loc);dragging=false;
}
eraseAllButton.onclick=function(e){context.clearRect(0,0,canvas.width,canvas.height);drawGird('lightgray',10,10);saveDrawingSurface();
}
strokeStyleSelect.onchange=function(e){context.strokeStyle=strokeStyleSelect.value;
}
guidewireCheckbox.onchange=function(e){guidewires=guidewireCheckbox.checked;
}
context.strokeStyle=strokeStyleSelect.value;
drawGird('lightgray',10,10);
</script>

虚线绘制

var  context=document.getElementById('theCanvas').getContext('2d');
function  drawDashedLine(context,x1,y1,x2,y2,dashLength) {dashLength=dashLength===undefined?5:dashLength;var deltaX=x2-x1;var deltaY=y2-y1;var numDashes=Math.floor(Math.sqrt(deltaX*deltaX+deltaY*deltaY)/dashLength);for(var i=0;i<numDashes;i++){context[i%2===0?'moveTo':'lineTo'](x1+(deltaX/numDashes)*i,y1+(deltaY/numDashes)*i);}context.stroke();}context.lineWidth=3;context.strokeStyle='blue';drawDashedLine(context,20,20,context.canvas.width-20,20);drawDashedLine(context,context.canvas.width-20,20,context.canvas.height-20,10);drawDashedLine(context,context.canvas.width-20,context.canvas.height-20,context.canvas.height-20,15);drawDashedLine(context,20,context.canvas.height-20,20,2);

扩展CanvasRenderingContext2D对象

var  context=document.getElementById('theCanvas').getContext('2d'),moveToFunction=CanvasRenderingContext2D.prototype.moveTo;
CanvasRenderingContext2D.prototype.lastMoveToLocation={};
CanvasRenderingContext2D.prototype.moveTo=function(x,y){moveToFunction.apply(context,[x,y]);this.lastMoveToLocation.x=x;this.lastMoveToLocation.y=y;
}
CanvasRenderingContext2D.prototype.dashedLineTo=function(x,y,dashLength){dashLength=dashLength===undefined?5:dashLength;var startX=this.lastMoveToLocation.x;var startY=this.lastMoveToLocation.y;var deltaX=x-startX;var deltaY=y-startY;var numDashes=Math.floor(Math.sqrt(deltaX*deltaX+deltaY*deltaY)/dashLength);for(var i=0;i<numDashes;i++){this[i%2===0?'moveTo':'lineTo'](startX+(deltaX/numDashes)*i,startY+(deltaY/numDashes)*i);}this.moveTo(x,y);
}
context.lineWidth=3;
context.strokeStyle='blue';
context.moveTo(20,20);
context.dashedLineTo(context.canvas.width-20,20);
context.dashedLineTo(context.canvas.width-20,context.canvas.height- 20);
context.dashedLineTo(20,context.canvas.height- 20);
context.dashedLineTo(20,20);
context.stroke();

CanvasRenderingContext2D对象中与线段绘制有关

属性 描述 类型 取值范围 默认值
lineWidth 以像素为单位的线段宽度 double 非零正数 1.0
lineCap 该值决定浏览器如何绘制线段的端点 DOMString butt,round,square butt
lineJoin 该值决定浏览器如何绘制线段的连接点 DOMString round,bevel，miter bevel
miterLimit 斜接线长度与二分之一线宽的比值，如果斜接线的长度超过了该值，浏览器就会以bevel方式来绘制线段的连接点 double 非零正数 10.0

以橡皮筋式辅助线来协助用户画圆

function drawRubberbandShape(loc){var angle,radius;if(mousedown.y===loc.y){radius=Math.abs(loc.x-mousedown.x);}else{angle=Math.atan(rubberbandRect.height/rubberbandRect.width);radius=rubberbandRect.height/Math.sin(angle);}context.beginPath();context.arc(mousedown.x,mousedown.y,radius,0,Math.PI*2,false);context.stroke();if(fillCheckbox.checked){context.fill();}
}

arcTo()

var  context=document.getElementById('theCanvas').getContext('2d');
function drawRubberbandShape(loc){var angle,radius;if(mousedown.y===loc.y){radius=Math.abs(loc.x-mousedown.x);}else{angle=Math.atan(rubberbandRect.height/rubberbandRect.width);radius=rubberbandRect.height/Math.sin(angle);}context.beginPath();context.arc(mousedown.x,mousedown.y,radius,0,Math.PI*2,false);context.stroke();if(fillCheckbox.checked){context.fill();}
}function roundedRect(cornerX,cornerY,width,height,cornerRadius){if(width>0)context.moveTo(cornerX+cornerRadius,cornerY);else context.moveTo(cornerX-cornerRadius,cornerY);context.arcTo(cornerX+width,cornerY,cornerX+width,cornerY+height,cornerRadius);context.arcTo(cornerX+width,cornerY+height,cornerX,cornerY+height,cornerRadius);context.arcTo(cornerX,cornerY+height,cornerX,cornerY,cornerRadius);if(width>0){context.arcTo(cornerX,cornerY,cornerX+cornerRadius,cornerY,cornerRadius);}else{context.arcTo(cornerX,cornerY,cornerX-cornerRadius,cornerY,cornerRadius);}
}function drawRoundedRect(strokeStyle,fillStyle,cornerX,cornerY,width,height,cornerRadius){context.beginPath();roundedRect(cornerX,cornerY,width,height,cornerRadius);context.strokeStyle=strokeStyle;context.fillStyle=fillStyle;context.stroke();context.fill();
}
drawRoundedRect('blue','yellow',50,40,100,100,10);
drawRoundedRect('purple','green',275,40,-100,100,20);
drawRoundedRect('red','white',300,140,100,-100,30);
drawRoundedRect('white','blue',525,140,-100,-100,40);

CanvasRenderingContext2D对象用于绘制圆弧及圆形

方法 描述
arc(double x,double y,double radius,double startAngle,double endAngle,boolean counterClockwise) 创建一条(x,y)为圆心，以radius为半径，以startAngle,endAngle为起止角的圆弧路径。角度单位式弧度，不是角度（180角度=PI弧度）最后一个参数可选，如果true，则按逆时针画弧，如果false（默认），则按顺时针画弧。如果再调用该方法时，当前路径中有子路径存在，那么浏览器将子路径的终点与所画弧的起点以线段相连。
arcTo(double x1,double y1,double x2,double y2,double radius) 创建一条以radius为半径的圆弧路径。该圆弧与当前点到（x1,y1)点的连线相切，同时(x1,y1)到（x2,y2）连线相切。与arc()一样，如果调用该方法时，当前路径中有子路径存在，那么浏览器将会从子路径的终点向起点处画一条线段。

二次方贝塞尔曲线

//创建一条表示二次方贝塞尔曲线的路径，第一个点曲线的控制点，第二个点锚点
context.quadraticCurveTo(double x1,double y1,double x2,double y2)//创建一条代表三次方贝塞尔曲线的路径，三个坐标的中，前两个点控制点，最后一个锚点
context.bezierCurveTo(double x1,double y1,double x2,double y2,double x3,double y3)

CanvasRenderingContext2D用于平移、旋转坐标系

方法 描述
rotate(double angleInRadians) 按照给定的角度来旋转坐标系
scale(double x,double y) 在X与Y方向上分别按照给定的数值来缩放坐标系
translate(double x,double y) 将坐标系平移到给定的X、y坐标处

变换矩阵方法

  • transform()可以在当前的变化矩阵之上叠加运用另外的变化效果；
  • setTransform()将当前的变化矩阵设置为默认的单位矩阵，然后在单位矩阵之上运用用户指定的变化效果。
  • 多次调用transform()方法造成的变换效果是累积，每次只要调用setTransform()，它就会将上一次的变换矩阵彻底清除。

用于坐标变换的方法

transform(double a,double b,double c,double d,double e,double f);
setTransform(double a,double b,double c,double d,double e,double f);
//使用该方程对平移，缩放，旋转操作
x1=ax+cy+e;
y1=bx+dy+f;

图形合成

合成模式 说明 合成模式 说明
source-atop 整个新图，并包含与旧图重叠部分在上方 source-in 新图与旧图重叠的新图部分(不可移植)
source-out 新图与旧图不重叠的新图部分(不可移植) source-over 新图遮盖旧图
destination-atop 整个旧图，并包含与新图重叠部分在上方(不可移植) destination-in 新图与旧图重叠的旧图部分(不可移植)
destination-out 新图与旧图不重叠的旧图部分 destination-over 旧图遮盖新图
lighter 两图重叠部分作加色处理 copy 只保留新图(不可移植)
xor 两图重叠部分变透明 darker 两图重叠部分作减色处理 
//设置合成模式
context.globalCompositeOperation='source-in';

剪辑区域

他是在canvas之中由路径所定义的一块区域，浏览器会将所有的绘图操作都限制在本区域内执行，在默认情况下，剪辑区域的大小与canvas一致，除非你通过创建路径并调用canvas绘图环境对象**clip()**方法来显示的设定剪辑区域，否则默认的剪辑区域不会影响canvas之中所绘制的内容，然而，一旦设置好剪辑区域，那么在canvas之中绘制的所有内容都将局限在该区域内，这意味在剪辑区域以外进行绘制时没有任何效果的

clip()

将剪辑区域设置为当前剪辑区域与当前路径的交集。第一次调用clip之前。剪辑区域的大小与整个canvas一致。

因为clip()方法会将剪辑区域设置为当前剪辑区域与当前路径的交际，所以对该方法的调用一般都是嵌入save()与restore()方法之间的，否则剪辑区域将会越变越小。

第3章 文本

文本的描边与填充

//文本内容填充 maxWidth以像素为单位指定所绘文本的的最大宽度，可选
context.fillText(text,canvas.width/2,canvas.height/2,maxWidth);
//文本描边
context.strokeText(text,canvas.width/2,canvas.height/2,maxWidth);
//测量文本，返回TextMetrics对象,包含width文本像素宽度
context.measureText(text);
//设置文本属性
context.font="256px Palatino";
context.textAlign='center';
context.textBaseline='bottom';
//渐变色填充文本
var gradient=context.createLinearGradient(0,0,canvas.width,canvas.height);
context.fillStyle=gradient;
context.fillText(text,65,200);
context.strokeText(text,65,200);

设置字型属性

字型属性分量 有效取值
font-style normal,italic,oblique
font-variant nromal,small-caps
font-weight normal,bold,bolder,lighter,100,200,300,…,900
font-size xx-small,x-small,medium,large,x-large,xx-large,smaller,larger,length,%
line-height normal,px,
font-family helvetica,verdana,palatino…
textAlign start,center,end,left,right
textBaseline top,bottom,middle,alphabetic,ideographic,hanging

第4章 图像与视频

drawImage()

源图像:source-image ------ s

目标canvas:destination-canvas -----d

//将整幅图像绘制在目标canvas中的指定位置上
drawImage(image,dx,dy);
//将图像完整地绘制到指定的位置上，绘制时会根据目标区域的宽度与高度进行缩放
drawImage(image,dx,dy,dw,dh);
//将整幅图像或其一部分绘制到目标canvas的指定位置上，绘制时会根据目标区域的宽高对图像进行缩放。
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
方法 描述
drawImage() 将图像绘制到canvas之中，如果图像参数时一个HTMLVideoElement类型的适配对象，那么drawIamge会将视频的当前帧绘制出来，这图像参数也可时另一个HTMLCanvasElement的canvas对象。向canvas之中绘制的图像可以是一整幅，也可以是它的一部分，并且在绘制时有可能要对图像进行缩放。源图像中需要被绘制的区域是通过sx,sy,sw,sh参数来确定的，浏览器会根据dw与dh参数对所绘内容进行缩放，前三参数是必须的。 
//创建新的空白 ImageData 对象。
context.createImageData(width,height);
context.createImageData(imageData);
//返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
context.getImageData(sx,sy,sw,sh);
//将图像数据（从指定的 ImageData 对象）放回画布上。
context.putImageData(imgData,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
方法 描述
getImageData() 返回一个ImageData对象，该对象所含的数组具有4XwXh个整数值，w和h表示以设备像素为单位的图像宽度与高度，可以通过width与height属性来访问该ImageData对象的宽度与高度。ImageData对象所含的data数组中，每4个整数值代表1个像素，这些整数分别表示红，绿，栏色分量，透明度的alpha值。注意：该方法返回ImageData对象的宽度(设备像素)并不总是等于传递给它的宽度（CSS像素）参数值。
putImageData() 将图像数据绘制在canvas的(dx,dy)坐标处，该坐标以CSS像素为单位，后面4个参数指定的脏矩形表示浏览器将会把这个矩形范围内的图像数据赋值到屏幕canvas，指定该矩形时需以设备像素为单位。

修改图像数据

ImageData对象中的data属性指向一个包含8位二进制整数的数组，这些整数的值位于0~255之间，分别表示一个像素的红绿栏及透明度分量。

imageData.data[i] 对应颜色
i 红色
i+1 绿色
i+2 蓝色
i+3 透明度 
var data=imageData.data;
//反色滤镜
for(var i=0;i<data.length-4;i+=4){data[i]=255-data[i];data[i+1]=255-data[i+1];data[i+2]=255-data[i+2];
}
//黑白滤镜
for(var i=0;i<data.length-4;i+=4){var average=(data[i]+data[i+1]+data[i+2])/3;data[i]=average;data[i+1]=average;data[i+2]=average;
}
//浮雕滤镜
var width=imageData.width;
for(var i=0;i<data.length;i++){if(i<=data.length-width*4){if((i+1)%4!==0){if((i+4)%(width*4)==0){data[i]=data[i-4];data[i+1]=data[i-3];data[i+2]=data[i-2];data[i+3]=data[i-1];i+=4;}else{data[i]=255/2+2*data[i]-data[i+4]-data[i+width*4];}}}else{if((i+1)%4!==0){data[i]=data[i-width*4];}}
}
//主线程
for(var i=0;i<data.length;++i){if((i+1)%4!=0){if((i+4)%(width*4)==0){data[i]=data[i-4];data[i+1]=data[i-3];data[i+2]=data[i-2];data[i+3]=data[i-1];i+=4;}else{data[i]=2*data[i]-data[i+4]-0.5*data[i+4];}}
}//半透明
for(var i=3;i<data.length;i+=4){data[i]=0.5；
}

将canvas保存位图片文件,FIleSystem API用法

canvas.addEventListener('dragenter',function(e){e.preventDefault();e.dataTransfer.effectAllowed='copy';
},false);
canvas.addEventListener('dragover',function(e){e.preventDefault();
},false);window.requestFileSystem=window.requestFileSystem||window.webkitRequestFileSystem;canvas.addEventListener('drop',function(e){var file=e.dataTransfer.files[0];window.requestFileSystem(window.TEMPORARY,5*1024*1024,function(fs){fs.root.getFile(file.name,{create:true},function(fileEntry){fileEntry.createWriter(function(writer){writer.write(file);});image.src=fileEntry.toURL();},function(e){alert(e.code); });},function(e){alert(e.code);});
},false);

视频处理

//在canvas中播放视频文件
function animate(){if(!video.ended){context.drawIamge(video,0,0,canvas.width.canvas.height);window.requestNextAnimationFrame(animate);
}
}
video.play();window.requestNextAnimationFrame(animate);

第5章 动画

方法 描述
long window.requestAnimationFrame(FrameRequestCallback c) 请求浏览器在绘制下一帧动画时调用指定的回调函数。若取消回调，可将该方法所返回的句柄传递给cancelRequestAnimationFrame()
viod window.cancelRequestAnimationFrame(long handle) 将原来以requestAnimationFrame()方法所注册的回调函数取消执行，必须在浏览器还未执行回调函数时才能调用此方法。 
//Firefox
window.mozRequestAnimationFrame(FrameRequestCallback c)
//chrome
window.webkitRequestAnimationFrame(FrameRequestCallback c)
//Internet Explorer
window.msRequestAnimationFrame(FrameRequestCallback c)window.requestNextAnimationFrame=(function(){return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.msRequestAnimationFrame||
function(callback,element){var self=this,start,finish;window.setTimeout(function(){start=+new Date();callback(start);finish=+new Date();self.timeout=1000/60-(finish-start);},self.timeout);
}})();//用于实现W3C规范所定义requestAnimationFrame()功能的“Polyfill式方法”
window.requestAnimationFrame=(function(){var originWebkitMethod,
wrapper=undefined,
callback=undefined,
geckoVersion=0,
userAgent=navigator.userAgent,
index=0,
self=this;if(window.webkitRequestAnimationFrame){wrapper=function(time){if(time===undefined){time=+new Date();}self.callback(time);};originWebkitMethod=window.webkitRequestAnimationFrame;window.webkitRequestAnimationFrame=function(callback,element){self.callback=callback;originWebkitMethod(wrapper,element);}
}if(window.mozRequestAnimationFrame){index=userAgent.indexOf('rv:');if(userAgent.indexOf('Gecko')!=-1){geckoVersion=userAgent.substr(index+3,3);if(geckoVersion==='2.0'){window.mozRequestAnimationFrame=undefined;}}
}return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.msRequestAnimationFrame||
function(callback,element){var self=this,start,finish;window.setTimeout(function(){start=+new Date();callback(start);finish=+new Date();self.timeout=1000/60-(finish-start);},self.timeout);
};})();

第6章 精灵

Sprite对象的属性

属性 描述
top y坐标
left x坐标
width 宽度
height 高度
velocityX 水平速度
velocityY 垂直速度
behaviors 包含行为对象的数组，在执行更新逻辑时，该数组中的各行为对象都会被运用于此精灵。
painter 用于绘制此对象的绘制器
visible 是否可见的boolean标志
animating 是否正在执行动画效果的Boolean标志 
var Sprite=function(name,painter,behaviors){if(name!==undefined)this.name=name;if(painter!==undefined)this.painter=painter;this.top=0;this.left=0;this.width=10;this.height=10;this.velocityX=0;this.velocityY=0;this.visible=true;this.animating=false;this.behaviors=behaviors||[];return this;
};Sprite.prototype={paint:function(context){if(this.painter!==undefined&&this.visible){this.painter.paint(this,context);}},update:function(context,time){for(var i=0;i<this.behaviors.length;++i){this.behaviors[i].execute(this,context,time);}}
};

图片绘制器

var ImagePainter=function(imageUrl){this.image=new Image();this.image.src=imageUrl;
};
ImagePainter.prototype={paint:function(sprite,context){if(this.image.complete){context.drawImage(this.image,sprite.left,sprite.top,sprite.width,sprite.height);}}
};

精灵表绘制器

SpriteSheetPainter=function(cells){this.cells=cells||[];this.cellIndex=0;
};
SpriteSheetPainter.prototype={advance:function(){if(this.cellIndex==this.cells.length-1){this.cellIndex=0;}else{this.cellIndex++;}},paint:function(sprite,context){var cell=this.cells[this.cellIndex];context.drawImage(spritesheet,cell.x,cell.y,cell.w,cell.h,sprite.left,sprite.top,cell.w,cell.h);}
};

精灵制作器

var SpriteAnimator=function(painters,elapsedCallback){this.painters=painters||[];this.elapsedCallback=elapsedCallback;this.duration=1000;this.startTime=0;this.index=0;
};
SpriteAnimator.prototype={end:function(sprite,originPainter){sprite.animating=false;if(this.elapsedCallback)this.elapsedCallback(sprite);else sprite.painter=originPainter;},start:function(sprite,duration){var endTime=+new Date()+duration,period=duration/(this.painters.length),animator=this,originalPainter=sprite.painter,lastUpdate=0;this.index=0;sprite.animating=true;sprite.painter=this.painters[this.index];requestNextAnimationFrame(function spriteAnimatorAnimate(time){if(time<endTime){if((time-lastUpdate)>period){sprite.painter=animator.painters[++animator.index];lastUpdate=time;}requestNextAnimationFrame(spriteAnimatorAnimate);}else{animator.end(sprite,originalPainter);}});}
}

第7章 物理效果

重力

//抛体垂直速度的修正公式
Vy=Vy0-gt;
ARENA_LENGTH_IN_METERS=10;
pixelsPerMeter=canvas.width/ARENA_LENGTH_IN_METERS;
top+=velocityY/fps;
velocityY=GRAVITY_FORCE*(elapsedTime/1000)*pixelsPerMeter
//摆钟运动角度计算公式
a=a0*cos(根号(g/1)*t)

AnimationTimer

AnimationTimer=function(duration,timeWarp){if(timeWarp!==undefined)this.timeWarp=timeWarp;if(duration!==undefined)this.duration=duration;this.stopwatch=new Stopwatch();
};
AnimationTimer.prototype={start:function(){this.stopwatch.start();},stop:function(){this.stopwatch.stop();},getElapsedTime:function(){var elapsedTime=this.stopwatch.getElapsedTime(),percentComplete=elapsedTime/this.duration;if(!this.stopwatch.running)return undefined;if(this.timeWarp==undefined)return elapsedTime;return elapsedTime*(this.timeWarp(percentComplete)/percentComplete);},isRunning:function(){return this.stopwatch.running;},isOver:function(){return this.stopwatch.getElapsedTime()>this.duration;}
};

时间轴扭曲函数

AnimationTimer.makeEaseInt=function(strength){return function(percentComplete){//y=x^2return Math.pow(percentComplete,strength*2);}
};AnimationTimer.makeEaseOut=function(strength){return function(percentComplete){//y=1-(1-x)^2return 1-Math.pow(1-percentComplete,strength*2);}
};AnimationTimer.makeEaseInOut=function(){return function(percentComplete){//y=x-sin(x*2*PI)/(2*PI)return percentComplete-Math.sin((percentComplete*2*Math.PI)/(2*Math.PI));}
};AnimationTimer.makeElastic=function(passes){passes=passes||DEFAULT_ELASTIC_PASSES;return function(percentComplete){//y=(1-cos(x*Npasses*PI)*(1-x))+xreturn ((1-Math.cos(1-percentComplete*Math.PI*passes))*(1-percentComplete))+percentComplete;}
};AnimationTimer.makeBounce=function(bounces){var fn=AnimationTimer.makeElastic(bounces);return function(percentComplete){percentComplete=fn(percentComplete);return percentComplete<=1?percentComplete:2-percentComplete;}
};
AnimationTimer.makeLinear=function(){return function(percentComplete){//y=xreturn percentComplete;}
};

第8章 碰撞检测

外接矩形判别法

ballWillHitLegde:function(ledge){var ballRight=ball.left+ball.width,ledgeRight=ledge.left+ledge.width,ballBottom=ball.top+ball.height,nextBallBottomEstimate=ballBottom+ballvelocityY/fps;return ballRight>ledge.left&&ball.left<ledgeRight&&ballBottom<ledge.top&&nextBallBottomEstimate>ledge.top;
}

外接圆判别法

isBallInBucket:function(){var ballCenter={x:ball.left+BALL_RADIUS,y:ball.top+BALL_RADIUS},distance=Math.sqrt(Math.pow(bucketHitCenter.x-ballCenter.x,2)+Math.pow(bucketHitCenter.y-ballCenter.y,2));return distance<BALL_RADIUS+bucketHitRadius;
}
//圆心之间的距离
c=根号(a^2+b^2);

碰到墙壁即被弹回的小球

handleEdgeCollisions:function(){var bbox=getBoundingBox(ball),right=bbox.left+bbox.width,bottom=bbox.top+bbox.height;if(right>canvas.width||bbox.left<0){velocityX=-velocityX;if(right>canvas.width){ball.left-=right-canvas.width;}if(bbox.left<0){ball.left-=bbox.left;}}if(bottom>canvas.height||bbox.top<0){velocityY=-velocityY;if(bottom>canvas.height){ball.top-=bottom-canvas.height;}if(bbox.top<0){ball.top-=bbox.top;}}
}

光线投射法

catchBall={intersectionPoint:{x:0,y:0},isBallInBucket:function () {if(lastBallPostion.left===ball.left||lastBallPostion.top===ball.top){return ;}var x1=lastBallPostion.left,y1=lastBallPostion.top,x2=ball.left,y2=ball.top,x3=BUCKET_LEFT+BUCKET_WIDTH/4,y3=BUCKET_TOP,x4=BUCKET_LEFT+BUCKET_WIDTH,y4=y3,m1=(ball.top-lastBallPostion.top)/(ball.left-lastBallPostion.left),m2=(y4-y3)/(x4-x3),b1=y1-m1*x1,b2=y3-m2*x3;this.intersectionPoint.x=(b2-b1)/(m1-m2);this.intersectionPoint.y=m1*this.intersectionPoint.x+b1;return this.intersectionPoint.x>x3&&this.intersectionPoint.x<x4&&ball.top+ball.height>y3&&ball.left+ball.width<x4;}
}

《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记相关推荐

  1. 读书笔记 | 墨菲定律

    1. 有些事,你现在不做,永远也不会去做. 2. 能轻易实现的梦想都不叫梦想. 3.所有的事都会比你预计的时间长.(做事要有耐心,要经得起前期的枯燥.) 4. 当我们的才华还撑不起梦想时,更要耐下心来 ...

  2. 读书笔记 | 墨菲定律（一）

    1. 有些事,你现在不做,永远也不会去做. 2. 能轻易实现的梦想都不叫梦想. 3.所有的事都会比你预计的时间长.(做事要有耐心,要经得起前期的枯燥.) 4. 当我们的才华还撑不起梦想时,更要耐下心来 ...

  3. 洛克菲勒的38封信pdf下载_《洛克菲勒写给孩子的38封信》读书笔记

    <洛克菲勒写给孩子的38封信>读书笔记 洛克菲勒写给孩子的38封信 第1封信:起点不决定终点 人人生而平等,但这种平等是权利与法律意义上的平等,与经济和文化优势无关 第2封信:运气靠策划 ...

  4. 股神大家了解多少？深度剖析股神巴菲特

    股神巴菲特是金融界里的传奇,大家是否都对股神巴菲特感兴趣呢?大家对股神了解多少?小编最近在QR社区发现了<阿尔法狗与巴菲特>,里面记载了许多股神巴菲特的人生经历,今天小编简单说一说关于股神 ...

  5. 2014巴菲特股东大会及巴菲特创业分享

     沃伦·巴菲特,这位传奇人物.在美国,巴菲特被称为"先知".在中国,他更多的被喻为"股神",巴菲特在11岁时第一次购买股票以来,白手起家缔造了一个千亿规模的 ...

  6. 《成为沃伦·巴菲特》笔记与感想

    本文首发于微信公众帐号: 一界码农(The_hard_the_luckier) 无需授权即可转载: 甚至无需保留以上版权声明-- 沃伦·巴菲特传记的纪录片 http://www.bilibili.co ...

  7. 读书笔记002：托尼.巴赞之快速阅读

    读书笔记002:托尼.巴赞之快速阅读 托尼.巴赞是放射性思维与思维导图的提倡者.读完他的<快速阅读>之后,我们就可以可以快速提高阅读速度,保持并改善理解嗯嗯管理,通过增进了解眼睛和大脑功能 ...

  8. 读书笔记001：托尼.巴赞之开动大脑

    读书笔记001:托尼.巴赞之开动大脑 托尼.巴赞是放射性思维与思维导图的提倡者.读完他的<开动大脑>之后,我们就可以对我们的大脑有更多的了解:大脑可以进行比我们预期多得多的工作:我们可以最 ...

  9. 读书笔记003：托尼.巴赞之思维导图

    读书笔记003:托尼.巴赞之思维导图 托尼.巴赞的<思维导图>一书,详细的介绍了思维发展的新概念--放射性思维:如何利用思维导图实施你的放射性思维,实现你的创造性思维,从而给出一种深刻的智 ...

  10. 产品读书《滚雪球：巴菲特和他的财富人生》

    作者简介 艾丽斯.施罗德,曾经担任世界知名投行摩根士丹利的董事总经理,因为撰写研究报告与巴菲特相识.业务上的往来使得施罗德有更多的机会与巴菲特亲密接触,她不仅是巴菲特别的忘年交,她也是第一个向巴菲特建 ...

最新文章

  1. 立体显示与BCN双稳态手性向列相
  2. python中平均值函数_python自定义函数ma(x,y)求简单平均值输出结果到列表
  3. 美团公开外卖配送中的“预估到达时间”算法规则
  4. laravel--表单验证
  5. 【经典面试题一】最长公共子序列（经典动态规划题）
  6. （chap2 TCP/IP基础知识） TCP/IP协议分层模型
  7. 【通知】《深度学习之摄影图像处理》配套代码开源！
  8. Ionic启动时提示:The Angular CLI requires a minimum Node.js version of eithor v10.13 or v12.0
  9. 烂泥：CentOS6.5挂载windows共享文件夹
  10. boost::math模块使用正态分布的示例
  11. 嵌入式操作系统的主要特点都有哪些
  12. 中国到底需要多少博士点？
  13. 18年高考云南628分想学计算机,2018山东高考投档线公布！山大文624理628…快查查你学校多少分进档...
  14. JavaScript : 基本的处理事件
  15. keil4如何设置自动缩进_在Keil中 自动格式化 代码
  16. Excel技巧——从身份证号码里提取员工性别
  17. ERD Online介绍
  18. excel 公式常见错误怎么处理
  19. html5情人节贺卡,情人节贺卡祝福语
  20. [ukulele]入门指南

热门文章

  1. CSP-J/S初赛选择题模拟及解析
  2. 拆解康耐特光学赴港上市：业绩增速有所放缓，持续增长能力存疑
  3. Java 基础知识面试题大集合
  4. 超级全的PS快捷键总结，建议收藏
  5. Systick滴答定时器解析
  6. 快速解决git did not exit cleanly (exit code 1) 错误
  7. Vue.js教程（一）
  8. Samba服务器的配置与使用
  9. Flowable定时器与实时流程图江南一点雨
  10. redis 之Jredis配置