MDC的canvas经典教程辑和个人学习笔记

mozilla developer center的关于canvas的教程集Canvas tutorial，可说是目前入门canvas教程中最棒的了。教程列表： Basic usage(中译：基本用法) Drawing shapes(中译：绘制图形) Using images(中译：使用图像) Applying styles and colors(中译：运用样式与颜色) Transformations(中译：变形) Compositing(中译：组合) Basic animations(中译：基本动画)

以下是个人的一点笔记，涵盖了教程中所有知识点。但只适用于个人，存此备忘。

canvas_ABC

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>cssass.com</title>
</head>
<body>
<canvas id="myCanvas" width='800' height="500" style="border:1px solid #c3c3c3;">ie（有ie9求测试）用户请绕行</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var con=c.getContext('2d');   //-----画矩形框
var grd=con.createLinearGradient(10,10,150,10);
grd.addColorStop(0,"#f00");  //起色
grd.addColorStop(1,"#0f0");  //终色
con.fillStyle=grd;   //渐变填充
con.rect(0, 0, 180,100)   //矩形1
con.fillRect(10,10,150,75);  //矩形2
con.clearRect(20,20,80,40);  //清除出一个矩形3
con.lineWidth=2;
con.lineCap ='round';  //线端点，默认butt; square和round会多出一半宽度的长度
con.lineJoin = 'round';  //折线连接点样式，默认miter延伸来连接；（round磨圆, beve削平） ；miter有miterLimit做限制，超过则应用beve
con.strokeStyle = '#00f';
con.strokeRect(30,30,20,20);  //矩形边框
var con2=c.getContext('2d');  //-------画折线
con2.moveTo(20,10); //起点位置
con2.lineTo(45,80);  //点
con2.lineTo(20,50);  //点
con2.lineTo(40,30);
con2.stroke();  //描边
// con2.fill(); //填充
var con3=c.getContext('2d');  //-------画圆
var radi=con3.createRadialGradient(290,50,10,295,60,30);  // 径向渐变（x1,y1,r1,x2,y2,r2）
radi.addColorStop(0, '#A7D30C');
radi.addColorStop(0.9, '#019F62');
//radi.addColorStop(1, 'rgba(1,159,98,0)');
con3.fillStyle = radi;
con3.beginPath();  //初始化路径
con3.arc(290,50,50,0,Math.PI*2,true);   //（x,y,radius,起，末弧度，逆，顺时针）
con3.closePath();  //终止路径
con3.stroke();
con3.fill();
var con4=c.getContext('2d');  //-------应用图片
var img=new Image();
img.src='http://bbs.blueidea.com/images/default/logo.gif';
img.onload=function(){
	con4.drawImage(img,10,90,200,200);  //图片对象，位置，[尺寸]，
	var ptrn = con4.createPattern(img,'repeat');  //图案填充
	con4.fillStyle = ptrn;
	con4.fillRect(0,350,150,150);
}
//var con4_2=c.getContext('2d');
//var img2=new Image();
//img2.src='https://developer.mozilla.org/samples/canvas-tutorial/images/rhino.jpg';
//con4_2.drawImage(document.getElementById('source'),33,71,104,124);
//con4_2.drawImage(document.getElementById('source'),0,0,20,100,0,90,120,124);
var con5=c.getContext('2d');  //二次，三次贝赛尔曲线
con5.moveTo(200,0)  //起点
con5.quadraticCurveTo(20, 20, 200, 200);  //（1个）控制点，终点
con5.stroke();
con5.moveTo(200,100)  //起点
con5.bezierCurveTo(250, 250, 350, 350, 220, 220); //（2个）控制点，终点
con5.stroke();
var con6=c.getContext('2d');  //文字阴影
con6.shadowOffsetX=2;
con6.shadowOffsetY=2;
con6.shadowBlur=2;
con6.shadowColor='rgba(0,0,0,0.5)';
con6.font='20px Times New Roman';
con6.fillStyle='black';
con6.fillText('hello HTML5',0,300);
</script>
</body>
</html>

canvas_DEF

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>cssass.com</title>
</head>
<body>
<canvas id="myCanvas" width='1000' height="600" style="border:1px solid #c3c3c3;">ie（有ie9求测试）用户请绕行</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var con1=c.getContext('2d');   //-----用于保存一些状态属性。
  con1.fillRect(0,0,40,40);
  con1.save();
  con1.fillStyle = 'blue'
  con1.globalAlpha = 0.1;
  con1.translate(50,0);  //【平移】圆点位置（位置1）
  con1.fillRect(0,0,40,40);
  con1.save();            //注意：圆点位置状态也会被保存
  con1.fillStyle = 'red'
  con1.globalAlpha = 1;
  con1.translate(50,0);
  con1.fillRect(0,0,40,40);
  con1.restore();   //恢复到位置1状态
  con1.translate(100,0); //从位置1开始移动100
  con1.fillRect(0,0,40,40);
  con1.restore();
  con1.save();
  con1.translate(200,0);
  con1.rotate(Math.PI*2/6);  //以圆点（200，0）为中心，【旋转】六分之一个角度
  con1.fillRect(0,0,40,40);
con1.restore();
con1.save();
con1.scale(1,0.25);  //【缩放】
con1.translate(250,0);
con1.fillRect(0,0,40,40);
con1.restore();
~function draw() {  //【变形】示例：http://www.html5.jp/blog/contents/HTML5-Tech-Talk-201001/transform-jquery.html
  con1.translate(200, 200);
  var sin = Math.sin(Math.PI/6);
  var cos = Math.cos(Math.PI/6);
  for (var i=0; i <= 12; i++) {
    con1.fillRect(0, 0, 100, 10);
    con1.transform(cos, sin, -sin, cos, 0, 0);  // (m11, m12, m21, m22, dx, dy) 水平缩放，垂直斜切，水平斜切，垂直缩放，水平平移，垂直平移。
  }
  con1.setTransform(1,0.5 , 0, 1,0, 0);  //set重置后设置。
  con1.fillRect(300,300, 100, 100);
}()
</script>
</body>
</html>

canvas_HIJ

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>cssass.com</title>
</head>
<body>
<canvas id="myCanvas" width='350' height="300" style="border:1px solid #c3c3c3;">ie（有ie9求测试）用户请绕行</canvas>
<canvas id="myCanvas2" width='350' height="300" style="border:1px solid #c3c3c3;">ie（有ie9求测试）用户请绕行</canvas>
<br />
<select id='types' onchange='comp();'>
	<option value='source-over' selected>source-over</option>
	<option value='source-in'>source-in</option>
	<option value='source-out'>source-out</option>
	<option value='source-atop'>source-atop</option>
	<option value='destination-over'>destination-over</option>
	<option value='destination-in'>destination-in</option>
	<option value='destination-out'>destination-out</option>
	<option value='destination-atop'>destination-atop</option>
	<option value='lighter'>lighter</option>
	<option value='darker'>darker</option>
	<option value='copy'>copy</option>
	<option value='xor'>xor</option>
</select>
<script type="text/javascript">
var $id=function(n){
	return document.getElementById(n) || n;
}
//组合
var con1=$id("myCanvas").getContext('2d');
function comp(){
	con1.save();
	con1.clearRect(0,0,200,300);
    con1.fillStyle = "#09f";
    con1.fillRect(15,15,70,70);
    con1.globalCompositeOperation =$id('types').value; //对所以绘制的图形均起作用。
    con1.fillStyle = "#f30";
    con1.beginPath();
    con1.arc(75,75,35,0,Math.PI*2,true);
    con1.fill();
	con1.restore();
	con1.font='20px Times New Roman';
	con1.fillText($id('types').value,0,200)
}
comp();
//clip
var con2=$id("myCanvas2").getContext('2d');
function draw() {
  con2.save();
  con2.translate(100,100);
  con2.fillRect(0,0,150,150);
  con2.translate(75,75);
  con2.beginPath();
  con2.arc(0,0,60,0,Math.PI*2,true);
  con2.clip();
  con2.fillStyle = '#143778';
  con2.fillRect(-75,-75,150,150);
  for (j=1;j<50;j++){
    con2.save();
    con2.fillStyle = '#fff';
    con2.translate(75-Math.floor(Math.random()*150),75-Math.floor(Math.random()*150));
	drawStar(con2,Math.floor(Math.random()*4)+2);
    con2.restore();
  }
  con2.restore();
}
draw();
function drawStar(con2,r){  //五角星的画法
  con2.save();
  con2.beginPath()
  con2.moveTo(r,0);
  for (i=0;i<9;i++){
    con2.rotate(Math.PI/5);
    if(i%2 == 0) {
      con2.lineTo((r/0.525731)*0.200811,0);
    } else {
      con2.lineTo(r,0);
    }
  }
  con2.closePath();
  con2.fill();
  con2.restore();
}
</script>
</body>
</html>