html5学习之路（Canvas画布1）
[html]
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>canvas示例</title>
<script type="text/javascript">
function mydrawrect(){
var canvas=document.getelementbyid("rect");
if (canvas==null){
return false;
}
var context=canvas.getcontext('2d');
context.fillstyle="#eeeeff";
context.fillrect(0,0,400,300);
context.fillstyle="red";
context.strokestyle="blue";
context.linewidth=1;
//绘制一个矩形
context.fillrect(50,50,100,100);
context.strokerect(50,50,100,100);
//绘制一个圆
context.beginpath();
context.arc(200,200,50,0,math.pi*2,true);
context.closepath();
context.fillstyle='rgba(255,0,0,0.25)';
context.fill();
//画直线
context.beginpath();
context.moveto(100,100);
context.lineto(100,300);
context.lineto(300,300);
context.closepath();
//context.fillstyle='rgba(255,0,0,0.25)';
//context.fill();
context.stroke();
}
</script>
</head>
<body onload="return mydrawrect();">
<canvas id="rect" width="400" height="300">
</body> www.2cto.com
</html>
显示效果：
上一篇： MIT研发洗碗机器人 干活不再机械