标签：
Web大前端时代之：HTML5+CSS3入门系列：http://www.cnblogs.com/dunitian/p/5121725.html
初始画布
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的正方形
清除画布
context.clearRect(x,y,w,h)
（圆形橡皮擦）
案例
绘制案例
常见几何
绘制直线
绘制300*300画布的对角线
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.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)
x，y 坐标这次是代表圆心
r 代表半径
s 代表开始弧度
e 代表结束弧度
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);//注意：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>
绘制文字
图像系列
扩展部分
绘制贝塞尔曲线
二次方贝塞尔曲线
quadraticCurveTo(cp1x,cp1y,x,y)
cp1x,cp1y是控制点坐标
x,y是终点坐标
<canvas id="myCanvas" style="border:1px solid;" width="300" height="200"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
// 下面开始绘制二次方贝塞尔曲线。
context.strokeStyle="dark";
context.beginPath();
context.moveTo(0,200);
context.quadraticCurveTo(75,50,300,200);
context.stroke();
context.globalCompositeOperation="source-over";
// 下面绘制的直线用于表示上面曲线的控制点和控制线，控制点坐标即两直线的交点（75,50）。
context.strokeStyle="#ff00ff";
context.beginPath();
context.moveTo(75,50);
context.lineTo(0,200);
context.moveTo(75,50);
context.lineTo(300,200);
context.stroke();
</script>
三次方贝塞尔曲线
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
cp1x,cp1y是控制点坐标
cp2x,cp2y是第二个控制点坐标
x,y是终点坐标
<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
// 下面开始绘制三次方贝塞尔曲线。
context.strokeStyle="dark";
context.beginPath();
context.moveTo(0,200);
context.bezierCurveTo(25,50,75,50,300,200);
context.stroke();
context.globalCompositeOperation="source-over";
// 下面绘制的直线用于表示上面曲线的控制点和控制线，控制点坐标为（25,50）和（75,50）。
context.strokeStyle="#ff00ff";
context.beginPath();
context.moveTo(25,50);
context.lineTo(0,200);
context.moveTo(75,50);
context.lineTo(300,200);
context.stroke();
</script>
图形的变换
继续更新ing
06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布
标签：
原文地址：http://www.cnblogs.com/dunitian/p/5149156.html
