HTML5canvas结合JS画图_H5之家 - 中国HTML5教程资源分享第一站

<!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>无标题文档</title>

<script type="text/javascript">
function draw() {
var c=document.getElementByIdx_x("myCanvas");
if (c.getContext) {
var cxt=c.getContext("2d");
cxt.fillStyle="rgba(0, 0, 255, 0.5)";
cxt.beginPath();
cxt.arc(70,28,25,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.fillStyle="rgba(0, 255, 0, 0.5)";
cxt.beginPath();
cxt.arc(55,48,25,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.fillStyle="rgba(255, 0, 0 , 0.5)";
cxt.beginPath();
cxt.arc(85,48,25,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

//第二个图
cxt.fillStyle="rgba(255, 0, 0 , 0.5)";
cxt.beginPath();
cxt.arc(160,48,25,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.fillStyle="rgba(255, 0, 0 , 0.5)";
cxt.beginPath();
cxt.arc(170,48,25,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.fillStyle="rgba(255, 0, 0 , 0.5)";
cxt.beginPath();
cxt.arc(180,48,25,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

//方块
cxt.fillStyle = "rgba(100,100,0, 0.5)";
cxt.fillRect (240, 10, 55, 50);
cxt.fillStyle = "rgba(100,100,0, 0.5)";
cxt.fillRect (250, 20, 55, 50);
cxt.fillStyle = "rgba(100,100,0, 0.5)";
cxt.fillRect (260, 30, 55, 50);

}
else {
alert("sorry!该浏览器不支持canvas效果，更新到最新版本后再来体验吧");
}

}

</script>
</head>
<body>
<canvas>
</canvas>

</body>
</html>