06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布（上）
06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布（上）
Web大前端时代之：HTML5+CSS3入门系列：http://www.cnblogs.com/dunitian/p/5121725.html
点击原文，查看笔记大图
05.HTML5 画布
初始画布
canvas默认是宽300px，高150px;
绘制步骤
1.定义一个id
<canvas id="canvasOne" width="300" height="300"></canvas>
2.获取canvas对象
var canvasObj = document.getElementById('canvasOne');
3.通过getContext获取上下文
var context = canvasObj.getContext("2d");
目前支持2d绘图
4.通过javascript进行绘制
context.fillStyle = "red";
设置样式为红色
context.fillRect(125, 125, 50, 50);
在x坐标为125，y坐标为125的地方绘制一个长为50宽为50的正方形
绘制案例
常见几何
绘制直线
绘制300*300画布的对角线
beginPath()
开始绘制
moveTo(x,y)
直线起点
lineTo(x,y)
直线终点
stroke()
绘制直线
<canvas id="canvasOne" width="300" height="300"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext("2d");
//context.strokeStyle = "#ff6a00";
context.beginPath();
context.moveTo(0, 0);
context.lineTo(300, 300);
context.stroke();
context.moveTo(0, 300);
context.lineTo(300, 0);
context.stroke();
</script>
绘制矩形
在画布中间绘制一个100*50的矩形
绘制
strokeStyle
strokeRect(x,y,w,h)
填充
fillStyle
fillRect(x,y,w,h)
<canvas id="canvasOne" width="300" height="300"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext("2d");
context.strokeStyle = 'rgb(100%,0%,100%)';
context.strokeRect(100, 125, 100, 50);
</script>
绘制圆形
绘制300*300画布的内切圆
beginPath()
开始绘制路径
arc(x, y, r, s, e, b)
x，y 坐标这次是代表圆心
r 代表半径
s 代表开始弧度
e 代表结束弧度
b 代表是否顺时针方向画图
默认逆时针
closePath()
结束绘制路径
扩充案例
fill()
填充
<canvas id="canvasOne" width="300" height="300"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext("2d");
context.fillStyle = 'rgb(0,50,0)';
context.beginPath();//开始绘制路径
context.arc(150, 150, 150, 0, Math.PI * 2,true);//注意：x，y 坐标这次是代表圆心
context.closePath();//结束绘制路径
context.fill();//填充
</script>
绘制弧线
context.closePath();
路径不闭合的时候会自动画一条直线（代码看注释）
<canvas id="canvasOne" width="300" height="300"></canvas>
<canvas id="canvasTwo" width="300" height="300"></canvas>
<canvas id="canvasThree" width="300" height="300"></canvas>
<script type="text/javascript">
//第一个画布
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext("2d");
for (var i = 0; i <= 15; i++) {
context.fillStyle = 'rgb(0,50,0)';
context.beginPath();//开始绘制路径
context.arc(0, 150, i * 10, 0, Math.PI * 1.5);//注意：x，y 坐标这次是代表圆心
//context.closePath();//结束绘制路径
context.stroke();//填充
}
//第二个画布
var canvasObj2 = document.getElementById('canvasTwo');
var context2 = canvasObj2.getContext("2d");
for (var i = 0; i <= 30; i++) {
context2.fillStyle = 'rgb(0,0,50)';
context2.beginPath();//开始绘制路径
context2.arc(0, 0, i * 10, 0, Math.PI * 1.5);//注意：x，y 坐标这次是代表圆心
//context2.closePath();//结束绘制路径
context2.stroke();//填充
}
//第三个画布-搞怪来袭
var canvasObj3 = document.getElementById('canvasThree');
var context3 = canvasObj3.getContext("2d");
for (var i = 0; i <= 30; i++) {
context3.fillStyle = 'rgb(0,0,50)';
context3.beginPath();//开始绘制路径
context3.arc(0, 150, i * 10, 1, 3);//注意：x，y 坐标这次是代表圆心
context3.closePath();//结束绘制路径,路径不闭合的情况下会自动补上一个直线，所以就搞怪了
context3.stroke();//填充
}
</script>
绘制三角形
绘制三角形
<canvas id="myCanvas" width="200" height="200"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.strokeStyle = "red";
context.beginPath();
context.moveTo(25, 25);
context.lineTo(150, 25);
context.lineTo(25, 150);
context.closePath();
context.stroke();
</script>
常用技能
透 明 度
rgba(r,g,b,a)
a代表透明度，取值范围在 0~1
清 除 画 布
context.clearRect(x,y,w,h)
（圆形橡皮擦）
案例
保存与恢复状态
状态
指当前画面所有样式，变形，裁切的快照
举个例子：你先用红色样式画一个矩形，然后保存状态，然后再用蓝色样式画一个矩形。
恢复状态画个矩形看看，发现====> 矩形是红色的====>说明====>状态保存下来了。
图例
保存
context.save();
恢复
context.restore()
移动坐标空间
context.translate(60,50);
x轴方向右移60，y轴方向下移50
for (var i = 1; i < 10; i++) {
context.save();//保存一下状态
context.translate(60 * i, 50);//x轴方向右移60*i，y轴方向下移50
//画伞的顶部
context.fillStyle = 'rgb(' + i * 25 + ',' + 0 + ',' + 255 + ')';
context.beginPath();
context.arc(0, 0, 30, 0, Math.PI, true);//在起点位置顺时针画一个半圆
context.closePath();
context.fill();
//画伞的底部
context.strokeStyle = "red";
context.strokeRect(-0.2, 0, 0.4, 30);
//画伞的根部
context.beginPath();
context.arc(-5, 30, 5, 0, Math.PI);//圆心左移五个单位，圆的右边点就在根部了
context.stroke();
context.restore();//恢复一下状态（不然每次都移动坐标原点，就变成天女散花了）
}
for (var i = 1; i < 10; i++) {
//x轴方向右移60+i，y轴方向下移50
context.translate(60 + i, 50);
//画伞的顶部
context.fillStyle = 'rgb(' + 255 + ',' + i * 25 + ',' + 0 + ')';
context.beginPath();
context.arc(0, 0, 30, 0, Math.PI, true);//在起点位置顺时针画一个半圆
context.closePath();
context.fill();
//画伞的底部
context.strokeStyle = "red";
context.strokeRect(-0.2, 0, 0.4, 30);
//画伞的根部
context.beginPath();
context.arc(-5, 30, 5, 0, Math.PI);//圆心左移五个单位，圆的右边点就在根部了
context.stroke();
}
旋转坐标空间
rotate(angle)
angle 代表旋转角度
弧度为单位
在坐标原点顺时针方向旋转
<canvas id="canvasOne" width="600" height="600"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext('2d');
context.translate(300, 300);
//画伞
function drawUmbrella(i) {
//画伞的顶部
context.fillStyle = 'rgb(' + i * 25 + ',' + 0 + ',' + 255 + ')';
context.beginPath();
context.arc(0, 0, 30, 0, Math.PI, true);//在起点位置顺时针画一个半圆
context.closePath();
context.fill();
//画伞的底部
context.strokeStyle = "red";
context.strokeRect(-0.2, 0, 0.4, 30);
//画伞的根部
context.beginPath();
context.arc(-5, 30, 5, 0, Math.PI);//圆心左移五个单位，圆的右边点就在根部了
context.stroke();
}
function draw() {
for (var i = 1; i <= 10; i++) {
context.save();//保存一下状态
context.rotate(Math.PI * (0.2 * i));//2Pi 弧度是一个圆
context.translate(0, 150);//越小越紧凑
drawUmbrella(i);//画伞（画伞代码未变）
context.restore();//恢复一下状态
}
}
window.onload = function () {
draw();
}
</script>
缩 放 图 形
context.scale(1.1, 1.1)
扩大1.1倍
rgba(r,g,b,a)
a代表透明度，取值范围在 0~1
<canvas id="canvasOne" width="600" height="600"></canvas>
<script type="text/javascript">
var canvasObj = document.getElementById('canvasOne');
var context = canvasObj.getContext('2d');
context.translate(300, 300);
for (var i = 1; i < 50; i++) {
context.rotate(Math.PI / 9);//旋转
context.scale(1.1, 1.1);//扩大1.1倍
context.translate(0.5, 0.5);//平移
context.fillStyle = 'rgba(' + i * 5 + ',' + 0 + ',' + 200 + ',' + 0.5 + ')';
context.beginPath();
context.arc(0, 0, 1, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}
</script>