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

MDC的canvas经典教程辑和个人学习笔记
作者：Neoxone 发表时间： 2010年09月10号，星期五阅读：6,306 次

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>

<!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>

<!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>

<!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>

标签： canvas, HTML5, 教程

这篇文章发布于 2010年09月10号，星期五，15:44，归类于 HTML5。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

Transform变形方法的可视化演示 | CSSASS 说：

2010年10月23日于11:35

[...] 关于canvas的其他方法，可以参考这篇文章：MDC的canvas经典教程辑和个人学习笔记相关文章:小试canvas鼠标绘图volume滑动块——html5中input [...]

zlite 说：

2011年11月28日于15:59

请教一下，在canvas_DEF实例中function闭包前面加一个～是什么意思呢

ONEBOYS 回复:
十一月 29th, 2011 at 10:26

这个~是个位运算符，其实和(function(){})() 中的第一个() 操作符，还有 void function(){}() 里的void操作符一样，与function(){}这个表达式（函数）进行操作，再赋给一个匿名，因为这个操作不影响函数本质，后面的()就能进行调用了。只是~操作后，将返回一个Number值(通过void 则会返回一个undefined)，但其实我们并不关心这个返回值。如果需要闭包内的返回值，就需要用()操作符了，如：var cc = (function(){return 1;})(); 我们这个用~只是因为这个~短罢了。

2011年11月29日于16:32

3QU,明白了。花了两天时间把你博客全看完了，代码也写了运行测试了一下，收获不小，非常感激

CSSASSCSSASS

MDC的canvas经典教程辑和个人学习笔记
作者：Neoxone 发表时间： 2010年09月10号，星期五阅读：6,306 次

相关文章:

4 条评论发表在“MDC的canvas经典教程辑和个人学习笔记”上

留下回复

MDC的canvas经典教程辑和个人学习笔记作者：Neoxone 发表时间： 2010年09月10号，星期五 阅读：6,306 次

相关文章:

4 条评论 发表在“MDC的canvas经典教程辑和个人学习笔记”上

留下回复

MDC的canvas经典教程辑和个人学习笔记
作者：Neoxone 发表时间： 2010年09月10号，星期五阅读：6,306 次

4 条评论发表在“MDC的canvas经典教程辑和个人学习笔记”上