在前面提到canvas是html5中一个重要特点，canvas功能非常强大,用photoshop可以实现的效果canvas也同样可以实现，下面我们用canvas实现基本图形的绘制。
一、canvas标签的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="1" width="200" height="200" style="border:1px solid red"></canvas>
</body>
</html>
可以看到canvas就像一块画布，我们可以在这个画布上面绘制我们需要的图形。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在javascript 内部完成。
二、画矩形
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="1" width="500" height="500" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
</body>
<script type="text/javascript">
var c=document.getelementbyid('1');
var p=c.getcontext("2d");
<span style="white-space:pre"> </span>//getcontext("2d") 对象是内建的 html5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
p.fillstyle="#ff0000";
p.fillrect(0, 0, 300, 300);
p.fillstyle="rgba(0,0,255,0.5)";
p.fillrect(200,200,500,500);
</script>
</html>
三、画线条
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
</body>
<script type="text/javascript">
var c=document.getelementbyid('1');
var p=c.getcontext("2d");
p.moveto(10,10);
p.lineto(150,50);
p.lineto(10,50);
p.stroke();
</script>
</html>
四、画圆形
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
</body>
<script type="text/javascript">
var c=document.getelementbyid('1');
var p=c.getcontext("2d");
p.fillstyle="#ff0000";
p.beginpath();
p.arc(80,80,15,0,math.pi*2,true);
p.closepath();
p.fill();
</script>
</html>
五、渐变
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
</body>
<script type="text/javascript">
var c=document.getelementbyid("1");
var cxt=c.getcontext("2d");
var grd=cxt.createlineargradient(0,0,175,50);
grd.addcolorstop(0,"#ff0000");
grd.addcolorstop(1,"#00ff00");
cxt.fillstyle=grd;
cxt.fillrect(0,0,175,50);
</script>
</html>
六、绘制图片
<!doctype html>
<html>
<body>
<canvas id="mycanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getelementbyid("mycanvas");
var cxt=c.getcontext("2d");
var img=new image()
img.src="/i/eg_flower.png"
cxt.drawimage(img,0,0);
</script>
</body>
</html>
七、多边形
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
</body>
<script type="text/javascript">
var c=document.getelementbyid('1');
var p=c.getcontext("2d");
p.fillstyle="#ff0000";
p.moveto(10,10);
p.lineto(150,50);
p.lineto(10,50);
p.lineto(20,30);
p.fill();
</script>
</html>
以上就是 小强的html5移动开发之路（6）——canvas图形绘制基础的内容。