本文主要包含html5 ，Canvas ，drawing等相关知识,匿名希望在学习及工作中可以帮助到您
只有对基础二维图形的绘画（drawing）、着色(coloring)、变换（transforming）有较强基础，才能更加有效的利用Canvas；
下面，我就简单了解一下，canvas是如何绘画基本shape的（矩形、直线、圆弧、贝赛尔曲线）等；
先贴一个以下所有涉及到的实现运行的基本代码段：
Base code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="modernizr-latest.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function() {};
Debugger.log = function(message) {
try {
console.log(message);
} catch (exception) {
return;
}
}
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport() {
return Modernizr.canvas;
}
function canvasApp() {
//是否支持CANVAS判断
if(!canvasSupport()) {
return;
}
//取Canvas
var theCanvas = document.getElementById("canvasOne");
//获取绘图环境context
var context = theCanvas.getContext("2d");
//绘图方法的实现
function drawScreen() {}
//绘图方法调用执行
drawScreen();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px; border:1px solid #0000ff">
<canvas id="canvasOne" width="550" height="400">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>以下所有实例代码，只要把上面的function drawScreen()替换掉即可！
Basic Rectangle Shape（矩形）
在Canvas中，画矩形有三种方式：filling(), stroking(), or clearing
三种方式对应以下三种方法（参数都相同，分别是矩形的左上角的坐标[x,y]、矩形的宽度、矩形的高度）：
fillRect(x,y,width,height)：填充矩形区域；
strokeRect(x,y,width,height):画一个矩形边框；
clearRect(x,y,width,height):清除指定的矩形区域、使该区域变得透明；
Example
function drawScreen() {
context.fillStyle = '#000000';//填充颜色
context.strokeStyle = '#00ff00';//轮廓颜色
context.lineWidth = 2;//线宽
context.fillRect(10, 10, 40, 40);//填充矩形
context.strokeRect(7, 7, 46, 46);//画矩形轮廓
context.clearRect(20, 20, 20, 20);//清除矩形区域
}上一篇有提到Current state； 当我们在绘画时，我们可以利用所谓的绘画状态的堆栈， 对于canvas context在任何一个时间的数据的每一个状态都会存储； 下面是对于每一个状态，存储在堆栈中的一个数据列表； 变换矩阵（旋转、移动、缩放等）； 剪切区域； Canvas特征的当前值（部分）： — globalAlpha — globalCompositeOperation — strokeStyle — textAlign, textBaseline — lineCap, lineJoin, lineWidth, miterLimit — fillStyle — font — shadowBlur, shadowColor, shadowOffsetX, and shadowOffsetY在绘图环境中，正在操作的当前path and 当前位置并不是状态的一部分；Importmant!!!如何保存恢复当前的状态呢？ context.save()---push to stack; context.restore()---pop form stack;先有一个简单的印象，之后会更加详细的剖析；Create Lines（直线）
利用path来创建线（line）
Path:用来画出一系列的相连的圆弧或者线条，可以称之为“轨迹”，使用它可以画出任意复杂的形状;
一个Canvas Context仅有一个current path ;
在调用context.save()时，current path并不做为当前的状态（current state）存储于stack中；
利用.beginPath()功能方法来启动一个Path；
利用.closePath()功能方法来关闭一个Path；
Example:画一条10px宽度的水平直线
function drawScreen() {
context.strokeStyle = "#000000";//线的颜色
context.lineWidth = 10;//线的宽度
context.beginPath();//启动path
context.moveTo(20, 20);
context.lineTo(100, 20);
context.stroke();//绘画
context.closePath();//关闭path
}<